Components
Input
Standard input with support for prefix, suffix and password handling.
Input is also broken down into variants / smaller components where each component handles more specific needs with custom built-in validation. So if you are about to use an input for amount, date, email, mobile number, ssn or time. Check out those components before you choose to use this one.
Always wrap <Input> in <ControlGroup v2> to get correct visual look and validation. It's also always a good pattern to use <Form v2> and <Button type='submit'> to get a complete form.
When grouping fields, always use <Fieldset legend='Adress'> to group inputs so that screen readers can stay in context.
For Trinidad users: If no visual legend is desired, pass
srOnly={true}to<Fieldset>to hide it visually but leave it visible to screen readers.
Properties
Form
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | ||
| className | string | ||
| isVertical | bool | ||
| onSubmit | func | ||
| onValidate | func | ||
| setError | shape |
ControlGroup
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | ||
| className | string | ||
| errorMessage | string | ||
| hasError | bool | ||
| helpMessage | string | ||
| idForInput | string | ||
| infoMessage | string | ||
| isLessSpace | bool | ||
| v2 | bool |
Inputv2
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| autoCapitalize | string | 'off' | |
| autoComplete | string | 'on' | |
| className | string | '' | |
| hasFormData | bool | false | |
| isSmall | bool | false | |
| prefix | node | null | |
| refElem | union | null | |
| selectOnFocus | bool | true | |
| showPassword | bool | true | |
| suffix | node | null | |
| id | string | ||
| inputHelpText | string | ||
| inverted | bool | ||
| label | string | ||
| multiline | bool | ||
| onClick | func | ||
| onFocus | func | ||
| size | string | ||
| type | string | ||
| value * | union |
Fieldset
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | ||
| className | string | ||
| legend | string | ||
| srOnly | bool |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.
