Input

Input component that simplifies accessibility and validation.

• Source

Features:

• Enforces including labels.
• Built in validation using HTML5 form validation API.
• Automatic aria-invalid attribute.
• Automatic aria-describedby attribute.
• Supports all input types including radio, checkbox, select, and textarea.

Styled Example

Input Types

Supports all HTML input types except the file type. Additionally accepts textarea and select.

Validation

This component supports HTML5 input validation.

Note that client-side validation is never a substitute for server-side validation.

The simplest validation method is to pass an object to the errors prop. The object keys should match valitaion attributes, and the values should either be strings or functions returning strings. In the case of functions, there is a single parameter with the value of the respective attribute.

For more advanced needs, the input's invalid status is provided to the description slot.

Custom Options

Some input support multiple options: radio, checkbox, select. In the case of radio and checkbox, input will be placed withing a fieldset element and each option will be represented by an input, all with the same name.

You can provide a list of options as an array of strings or objects to explicitly specify the label, value, and any other attributes you want on the element.

Hidden Label

Sometimes you may want to hide your label and only show the input. Excluding the label causes an accessibility issue, but you can visually hide the label text with CSS. Note that you will need to add the styles to your project.

Description

If you want to add a description to your input, the best practice is to include an aria-describedby attribute in combination with an ID on the description element. Fortunately, with this component you can simply use the description slot.

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ 
  root: string,
  fieldset: string,
  fieldsetItems: string,
  fieldsetItem: string,
  legend: string,
  label: string,
  input: string,
  description: string,
  errors: string,
  error: string,
}"