Input

Inputs are areas in which users can enter information. In Funkwhale, these mostly take the form of search fields.

Prop	Data type	Required?	Description
placeholder	String	No	The placeholder text that appears when the input is empty.
icon	String	No	The Bootstrap icon to show on the input.
v-model:value	String	Yes	The text entered in the input.

Input model

You can link a user's input to form data by referencing the data in a v-model directive.

<fw-input
  v-model="value"
  placeholder="Search"
/>

Input icons

Add a Bootstrap icon to an input to make its purpose more visually clear.

<fw-input
  v-model="value"
  icon="bi-search"
  placeholder="Search"
/>

Input-right slot

You can add a template on the right-hand side of the input to guide the user's input.

<fw-input v-model="value" placeholder="Search">
  <template #input-right>
    suffix
  </template>
</fw-input>

suffix