Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
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. |
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 |
|
7. Field value |
Value set for an individual time interval. Default is set to 0 unless specified otherwise. |
No |
|
8. Number stepper |
Native browser up and down buttons that allow users to increase and decrease the numerical value in the field. |
No |
|
9. Suffix |
Textual label to represent each field’s unit of time (days, hours, minutes, or seconds). |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| type Variant | day hour minute | hour minute second | minute second | day hour minute |
| state Variant | rest | focus | disabled | readOnly | rest |
| validation Variant | neutral | error | neutral |
Component dependencies
This component is internally dependent on the following form sub-components:
|
Figma |
Code |
|---|---|
|
inputs |
fieldset |
|
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 | undefined |
| popover Boolean | true | false | undefined |
| ✏️ fieldLabel Text | string | Field label |
| hasRequiredMarker Boolean | true | false | undefined |
| hasOptionalMarker Boolean | true | false | true |
| ↳ ✏️ helperText Text | string | Optional helper text |
| helperText Boolean | true | false | undefined |
| ↳ helperLink Boolean | true | false | undefined |
| isDisabled Variant | false | true | false |
It’s also dependent on:
Help and support