Components / Choice
ColorPicker
Saturation/brightness square, hue and opacity rails, hex entry, swatches and an eyedropper.
@ruckc/truss-ui Choice
Import
import { ColorPicker } from '@ruckc/truss-ui';Playground
value
API
| Prop | Type | Default | Description |
|---|---|---|---|
value bindable | string | '#1f5fbf' | #rrggbb, or #rrggbbaa when `alpha` is on and opacity < 1. |
label | string | — | Visible label shown above the control. |
ariaLabel | string | — | Accessible name when no visible `label` is shown. |
alpha | boolean | false | Offer an opacity control; the value gains an alpha channel (`#rrggbbaa`) when opacity < 1. |
swatches | string[] | ['#1f5fbf', '#2a78d6', '#1baf7a', '#008300', '#eda100', '#eb6834', '#e34948', '#e87ba4', '#6250d6', '#1a1c22', '#7a7f8e', '#ffffff'] | Preset colours to offer. |
disabled | boolean | false | Disables the control: it cannot be focused, changed or activated. |
error | string | — | Error message. Marks the control invalid, replaces the hint, and is announced to assistive technology. |