Input
Example
Variants
Basic
With label
States
Sizes
Textarea
Addons
Addon sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| * id | | Html id attribute. | |
| error | | Error state. If vaule is string, it's treated as error message. | |
| help | | Help text. | |
| isActive | | Active state. | |
| isDisabled | | Disabled state. | |
| isReadonly | | Readonly state. | |
| label | | Label text. | |
| leftAddons | | ||
| multiline | | Multiline input | |
| name | | Html name attribute. | |
| onChange | | | Value change callback function. |
| placeholder | | Placeholder text | |
| renderError | | Custom error renderer. Passes props as function parameter. | |
| renderHelp | | Custom help renderer. Passes props as function parameter. | |
| renderLabel | | ||
| rightAddons | | ||
| size | | Size of element. | |
| type | | | Input html type. |
| value | | Input value. |
Accessibility
Form inputs might seem pretty straightforward, but take extra care when dealing with labels:
Labels
Every input needs a label
Always make sure there is a textual label associated with an input. While it might be tempting to remove labels for one-input forms such as search, each input needs it's own label that clearly describes what the user should enter.
Sometimes, it might be sufficient to provide for example a search icon in the submit button and a placeholder. Sighted users will probably be able to recognize that they are dealing with a searchform - but screenreader users won't. They need a textual label for the input (can be visually hidden) and a readable submit button.
Tooltips
When using a tooltip to further describe an input, make sure the trigger is outside the <label> element. Otherwise it can't be opened using a touchscreen (touching the label focuses the input element) and keyboard users won't be able to focus it (nesting focus is tricky).
Links
Links in labels have the same downsides as Tooltips. Check the section above.
Addons
When using input addons, you as the author must make sure that addons describe inputs correctly and sufficiently. aria-labelledby and aria-describedby work great accross screen readers and are well documented.
Further reading
- Creating Accessible Forms - Labels
- Web Accessibility Tutorials - Forms
- Form design patterns book
- Using aria-labelledby to concatenate a label from several text nodes
- Web Accessibility Tutorials - Form Instructions
- Creating Accessible Forms - Advanced Form Labeling
Aliases
<Textarea /> === <Input multiline />