Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA bottom sheet of named colour swatches in a radio group, where the chosen swatch is shown with a check and its name, and the trigger previews the current colour. Use this when a phone form asks for a label, theme or calendar colour from a short palette.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a phone form asks for a label, theme or calendar colour from a short palette.
Do not use it for any colour (use a full colour picker) or when colour is the only way to tell choices apart (names are required here).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | { value: string; name: string }[] | required | Palette. value is any CSS colour. |
value | string | required | The chosen colour value. |
onValueChange | (value: string) => void | required | Called on choosing. |
The pattern ships with a Testing Library test (color-picker-sheet.test.tsx) that drives it through roles and the keyboard.