A field for a hex color. The swatch on the left shows the color and opens a Color Picker in a popover. You can also type the code.
Name the field with a label passed as children. Without a visible label, use aria-label.
swatches shows colors to pick with one click inside the popover.
Two labeled fields side by side, with a preview that follows them as they change.
Use filled, light, ghost or subtle with a type, and rounded, to change the surface of the field.
Shows the color and blocks the field and the swatch.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | the color, to control the component | string | '#rrggbb', '#rgb' | - |
| initialValue | the color on the first render | string | '#rrggbb', '#rgb' | #000000 |
| onChange | called with the color as #rrggbb in lowercase | (hex: string) => void | - | - |
| swatches | colors to pick with one click in the popover | string[] | - | - |
| placeholder | text shown when the field is empty | string | - | #000000 |
| pickerLabel | name of the swatch button and of the dialog | string | - | Choose color |
| disabled | disable the component | boolean | - | false |
| type | color of the field | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | default |
| rounded | round the corners | boolean | - | false |
| filled | filled variant | boolean | - | false |
| light | light variant | boolean | - | false |
| ghost | outline variant | boolean | - | false |
| subtle | subtle variant | boolean | - | false |
| ... | native props, passed to the input | InputHTMLAttributes | 'aria-label', 'name', ... | - |
The color changes as soon as the text holds six digits, with or without the #. A short code like #abc is read when the field loses the focus, and becomes #aabbcc. Any other text is dropped on blur, and the field goes back to the current color. The field always holds a color, so it cannot be left empty.
The ref points at the input.
The field is named by its label, or by aria-label. The swatch is a button with aria-haspopup="dialog" and aria-expanded, named by pickerLabel. The picker opens in a dialog with the focus on its square. Escape closes it and puts the focus back on the swatch. The code is also a text in the field, so the color is not conveyed by the swatch alone. See Color Picker for the keys.