Color picker
React componentChoose an RGB color with an inline saturation, brightness, and hue picker.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
label | string | undefinedDefault: "Color" | A meaningful visible or accessible label. |
value | string | undefined | Controlled value. Pair with its change callback. |
defaultValue | string | undefinedDefault: "#0a2eb5" | Initial value for uncontrolled usage. |
onValueChange | ((value: string) => void) | undefined | Called with the next value. Update controlled state here. |
disabled | boolean | undefined | Disables interaction (or date matchers for DatePicker). |
name | string | undefined | Field name used in form submission. |
Accessibility & interaction
Use a persistent visible label and provide textual errors; native controls support keyboard input and browser form constraints.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
Uses six-digit RGB hex. Drag in the color square or use the keyboard sliders to adjust saturation, brightness, and hue.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.