ColorInput
A colour as a hex value, typed or picked. Presets keep choices within a palette, such as label or brand colours.
- ColorInput
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ColorInput
Used for the label dot and its badge.
Dark theme, ColorInput
Used for the label dot and its badge.
High contrast theme, ColorInput
Used for the label dot and its badge.
UsageLink to the section Usage
import { ColorInput } from '@skribly/ui/forms'<ColorInput label="Label colour" pickerLabel="Pick a colour" hueLabel="Hue"
defaultValue="#d97706" swatches={['#d97706', '#2563eb']} swatchesLabel="Presets" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The hex field accepts typing and arrow keys.
- The swatch button opens a dialog with a 2D colour area, a hue slider and presets, all keyboard operable; the presets are a listbox named by the required swatchesLabel, and React Aria names each colour in words.
- The hex text says the value, so the swatch is never the only cue.
This demo runs through axe in all three themes on every test run. See what the tests check.