Funkwhale UI

Appearance

ts
import Input from "~/components/ui/Input.vue"

Input ​

Inputs are areas in which users can enter a single-line text or a number. Several presets are available.

ts
{
  icon?: string;
  placeholder?: string;
  password?: true;
  search?: true;
  numeric?: true;
  label?: string;
  autofocus?: boolean;
  reset?: () => void;
} & (ColorProps | DefaultProps | PastelProps)
  & VariantProps
  & RaisedProps
  & WidthProps

Link a user's input to form data by referencing the data in a v-model of type string | number.

ts
const value = ref("Preset Value");
template
<Input v-model="value" placeholder="Your favorite animal" />

NOTE

To convey the intent of the input field, add either a text label or a custom, screenreader-friendly label template. Read more on form field labelling

Define the autocomplete and type attributes to add semantic clarity and accessibility for machine assistants. A rich taxonomy exists.

NOTE

Make sure that when the user starts typing, the page does not radically change. This is about predictability. Warn users if a context change is unavoidable. 3.2.2

Input icons ​

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

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

Add a label ​

You can either define a text-only label with the label prop, or place a custom template into the #label slot:

template
<Input v-model="user">
  <template #label>
    User name
  </template>
</Input>

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

template
<Input v-model="user" label="How do you want to be called?" />

Input-right slot ​

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

template
<Input v-model="value" placeholder="🐈">
  <template #input-right>
    Paste your cat!
  </template>
</Input>

Color ​

See Button for a detailed overview of available props.

Presets ​

template
<Input search v-model="search" />

Credentials ​

template
<Spacer :size="64" />
<Layout form stack>
  <Input v-model="user" label="User name" autocomplete="username" />
  <Input password v-model="password" label="Password" />
  <Layout flex>
    <Button primary> Submit </Button>
    <Button @click="()=>{user='';password=''}"> Clear </Button>
  </Layout>
</Layout>

TIP

We use the spacer to simulate the baseline alignment on page layouts (64px between sections)

Add a reset option ​

template
<Input
  v-model="value"
  :reset="() => { value = 'Original value' }">
</Input>

Fallthrough attributes ​

If you add attributes that are no props, they will be added to the resulting <input> element:

template
<Input v-model="password" required
  field-id="password-field"
/>

Using this component

A11y Checklist ​

Accessible input ​

vue
<Input
  v-model="username"
  label="User name"
  autocomplete="username"
/>
<Input
  v-model="password"
  label="Password"
  password
/>

See the complete Form example

Test this component in isolation against WCAG2 criteria