Color field
A color field picks one colour: a swatch that opens the native picker, the colour's name and where it is used, and its hex code as text.
Valid and invalid
Buttons and highlights
Show code
<KbColorField label="Brand colour" hint="Buttons and highlights" value="#1a202b" onChange={set} />Use a hex code like #1a202b.
Show code
<KbColorField label="Links" value="#12" onChange={set} />When to use
- Use it when a person sets a brand or theme colour and may paste a code from a style guide.
- Say where the colour is used in the hint, not only its name.
- Pair a group of fields with a readability check when text sits on a colour.
Headings and body
Import
import { KbColorField } from "@/components/ui/KbColorField";
<KbColorField label="Brand colour" hint="Buttons and highlights" value={color} onChange={setColor} />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | The colour's name; also names the picker. |
hint | string | None | Where the colour is used. |
value, onChange | string | None | A hex code, #rgb or #rrggbb. |
disabled | boolean | None | Locks the swatch and the code. |
Keyboard and screen readers
- The swatch and the code box each have a name; the code box is linked to its hint or error.
- A code that is not a colour is announced as an alert in words, not shown by colour alone.