Input ​

Using this component

A11y Checklist ​

• If the input has an icon, it has an appropriate text alternative that describes its purpose. 1.1.1
• The input label clearly describes its purpose. 1.3.1
• If the input collects user data, add programmatic attributes/props such as password or autocomplete="username". 1.3.5
• If some input triggers a context change such as navigating away from the page or opening a modal, make it predictable. 3.2.2
• If you add controls into the slots, those can be operated using only the keyboard. 2.1.1
• If the input is required, this is clearly indicated in the label. 3.3.2
• Any validation errors are clearly identified and described to the user. 3.3.1
• Error messages suggest how to fix the problem (e.g., "Password must be at least 8 characters long"). 3.3.3

Accessible input ​

const username = ref('')
const password = ref('')
const search = ref('')

<Input
  v-model="username"
  required
  label="User name"
  autocomplete="username"
  :reset
>
  <template #start>
    <!-- user -->
    <Icon icon="material-symbols:person" />
  </template>
  <template #end>
    <!-- user -->
    <Button
      class="color-destructive-solid shape-square"
    />
    <Button
      class="color-primary-solid shape-square"
    />
  </template>
</Input>

<Input
  v-model="password"
  password
  label="Password"
/>

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

Also see the Form example

Test this component in isolation against WCAG2 criteria