A text field for a color code, such as #3E63DD, with the color shown at its start.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
sizesmbk-color-field--size-<value> | mdsm | md | The input’s two heights, with a 20 px swatch at md and a 16 px one at sm. Small text never goes under 16 px on a phone. |
errorsmbk-color-field--error | On or off | Off | The color is not one the form can take. Draws the danger border, kept while focused, and the error icon after the code. |
Examples
Usage
A Field around it gives the label and the help. Type or paste a code; it settles when you leave the field or press Enter, and the swatch follows.
Error
The input’s error look, with the warning icon after the code, and the field’s message saying what to type.
Read only
The code can be read and copied, not changed.
Disabled
The field is dimmed and out of reach.
Sizes
The input’s two heights, with a 20 px and a 16 px swatch.
Guidelines
Purpose
A text field for a color code, such as #3E63DD, with a swatch of the color at its start. It is the way to enter an exact color, typed or pasted; to choose a color by eye, use the color picker, whose panel holds one.
When to use
- To enter an exact color, such as a brand's color from its guidelines.
- Beside a color picker or in its panel, for the code.
When not to use
- To choose a color by eye. Use the color picker.
- To choose among a few set colors. Use the color swatch picker.
Usage rules
Do
- Say the format in the help text.
- Say in the message what to type when the color is wrong for the form.
Don't
- Use it alone where readers choose colors by eye; pair it with the color picker.
Anatomy
- The block, always on the input's well: its markup carries the input's classes as well as its own.
- The swatch part, a color swatch in the input's leading content, 20 px at the medium size and 16 px at the small one, showing the color the field holds.
- The control part, a text control holding the code, which is also the input's control part.
- In error, the input's error icon, a warning sign after the code.
Behavior
The field takes a hex code, with or without the #, in three or six digits. The code is settled when the reader leaves the field or presses Enter, and written as #3E63DD; the swatch then shows the color. A code that is not a color is put back to the last good color. The up and down arrow keys step the color. The page hears the new color when it is settled, and nothing when the field is emptied.
The wrapper holds its own color, or follows the color the page gives it. The field never decides that a color is wrong for the form: the page sets the error and the field's message says why. Read-only, the code can be read and copied; disabled, the field is out of reach.
Accessibility
What it does for you
- A screen reader hears the field's name and the code.
- The swatch is hidden from screen readers, which would only hear the color again.
- In development, a color field with no name logs a warning in the console.
- The up and down arrow keys step the color, and Enter settles a typed code.
What you must do
- Give it a label like any input; inside a field it has one.
- Say what to type in the help text, such as “Six digits after #”.
How to test
- Tab to the field: the focus ring shows in both themes and in a forced-color mode. Type a code and press Enter: it settles as written, such as #3E63DD. Type something that is not a color and press Enter: it goes back to the last good color.
- With a screen reader, the field is read by its label and its code, and the swatch is not read.
- With text at 200% and the page 320 pixels wide, the code stays whole.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the field. Leaving the field settles the code. |
| Enter | Settles the typed code. |
| Up ArroworDown Arrow | Steps the color. |
Source
The files the color field is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-color-field — Color field. Figma "Color field" 7408:727.
* Built on the input: the block always sits on an smbk-input well, the text control is the input's control part,
* and the color swatch (smbk-color-swatch) sits in the input's leading content. The padding, the code's text, hover,
* focus, error, read-only, disabled and the two sizes are the input's own, so a change to the input reaches the color
* field. This stylesheet adds only what the code needs. */
/* Figures of one width, so a code that changes does not shift sideways. */
.smbk-color-field__control {
font-variant-numeric: tabular-nums;
}Manifest
{
"name": "color-field",
"block": "smbk-color-field",
"summary": "A text field for a color code, such as #3E63DD, with the color shown at its start.",
"adapt": "css",
"axes": {
"size": {
"values": [
"md",
"sm"
],
"default": "md",
"description": "The input’s two heights, with a 20 px swatch at md and a 16 px one at sm. Small text never goes under 16 px on a phone."
}
},
"flags": {
"error": {
"description": "The color is not one the form can take. Draws the danger border, kept while focused, and the error icon after the code."
}
},
"parts": [
"swatch",
"control"
],
"figmaNodeId": "7408:727"
}