funkwhale/front/ui-docs/components/ui/input.md

1.5 KiB

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