New form components (Text field, Textarea, Radio Group, Checkbox, NumberField, TimePicker) can be used alongside the legacy form components (e.g. Radio Button (Deprecated), Checkbox (Deprecated), Text (Deprecated), Select, MultiSelect, Number) where appropriate. But check how they look together. Some pairings might not align correctly (For example Text Field next to a legacy Select component).
Anatomy
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Field label |
Mandatory textual label used to describe the form field to guide users in filling it. |
No |
|
2. Required or optional marker |
Textual label used to denote if a field is required or optional. Marker’s copy is not changeable. |
Yes |
|
3. Popover trigger |
Used to display a Popover with more content explaining the context of a field. Used when Helper text is not sufficient. |
Yes |
|
4. Helper text |
Additional description helping users provide the right input, if the field label is insufficient. |
Yes |
|
5. Field |
Input element that allows users to write content with optional value or placeholder. |
No |
|
6. Form Validation |
Icon and text used when validating user form input to provide advice on fixing input errors and confirmation when they are addressed. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | rest | focus | disabled | read-only | rest |
| validation Variant | neutral | error | neutral |
Component dependencies
This component is internally dependent on the following form sub-components:
|
Figma |
Code |
|---|---|
|
formElement.labelGroup |
Legend |
|
formElement.validation |
InputError |
|
|
InputLabel |
|
|
FormDescription |
Code sub-components
Refer to the code documentation for further information.
Figma sub-components
| Property | Values | Default |
|---|---|---|
| ↳ ✏️ defaultText Text | string | (default) |
| hasDefaultMarker Boolean | true | false | false |
| popover Boolean | true | false | false |
| ✏️ fieldLabel Text | string | Field label |
| hasRequiredMarker Boolean | true | false | false |
| hasOptionalMarker Boolean | true | false | true |
| ↳ ✏️ helperText Text | string | Optional helper text |
| helperText Boolean | true | false | false |
| ↳ helperLink Boolean | true | false | false |
| isDisabled Variant | false | true | false |
It’s also dependent on:
Help and support