View in Storybook
Anatomy
The hexamdecimal value can be altered to display any colour needed in a ColorField.
- Label (optional): A title for a ColorField to describe its purpose.
- Swatch: A visualisation of the selected colour swatch.
- helpMessage (optional): When a label is not required, longer helpful text can be added.
- Prefix: To signify the acceptable type of value.
- Value: Displays the hexadecimal value that has been entered.
States
Focused
Upon clicking a ColorField, the onFocus state is displayed by default and any placeholder text is removed.
Entered
When a value has been input, the text color darkens.
Error
Error validation messages appear underneath the ColorField when there has been an invalid input. Any error should be displayed as soon as the user has interacted with the ColorField and removed when interacted with again and the error has been fixed.
Disabled
A disabled ColorField prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.
ReadOnly
A read-only ColorField prevents user modification but its contents can be selectable.
Properties
ColorField offers further props for customisation when necessary within the product UI.
|
helpMessage
A single validation message may be displayed to provide helpful information for a user to complete their task. It is most commonly used to explain why a value is invalid so they can correct it and submit the form. |
|---|
|
Hidden label
It may sometimes be necessary to hide labels, but label text must still be made available for screen readers. Placeholder text should be made visible in these instances for users to understand what text to input. |
|---|
Usage
Users can add a custom hexadecimal value into the ColorField or pick from a set of pre-defined color swatches underneath the component, inside a DropdownMenu.
Picker
When selecting, the ColorField displays a picker of pre-defined color swatches underneath the component, inside a DropdownMenu.
Best practice
- Always show the color swatch and value, even when it is not editable when it can be edited.
- Clearly label the purpose of a ColorField and what the colour will be used for.
- Validate input as soon as it has been interacted with.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use helper text for important information. |
🚫 Add essential text as placeholder, use the helpMessage prop. |
|
✅ Display the label as it provides further context and remains when the user is adding information. This can be hidden when necessary. |
🚫 Remove the label as it incurs accessibility issues. |
|
✅ Use to provide a value input. |
🚫 Remove the value or color swatch. |
|
✅ Keep the field to its shortest possible width. |
|