3.2 KiB

Raw Blame History

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.

<Input v-model="value" placeholder="Search" />

Input icons

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

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

Label slot

<Input>
  <template #label>
    User name
  </template>
</Input>

User name

If you just have a string, we have a convenience prop, so instead you can write:

<Input label="User name" />

Input-right slot

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

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

suffix

Presets

Search

<Input search />

Password

<Layout flex no-gap style="align-items:flex-end">
  <Spacer v
    :size="80"
    style="align-self: baseline;"
  />
  <Input>
    <template #label>
      User name
    </template>
  </Input>
</Layout>
<Layout flex no-gap style="align-items:flex-end">
  <Spacer v
    :size="80"
    style="align-self: baseline;"
  />
  <Input password>
    <template #label>
      Password
    </template>
  </Input>
</Layout>

User name Password

Fallthrough attributes

If you add attributes that are no props, they will be added to the component:

<Input required
  field-id="password-field"
/>

3.2 KiB Raw Blame History