A single choice among color swatches, on a native radio group.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/color-selectorPlayground
Color
Options
Finish
Unavailable
Finish
Icons animation
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/color-selector
Options
Pass your own options. color takes any CSS color and label shows in the header.
Finish
Disabled
Motion
Accessibility
- Native radio inputs, each named for its color.
- The chosen name is shown as text, so color is never the only signal.
Motion
- The ring grows around the chosen swatch.
- With reduced motion, the ring fades in.
Responsive behavior
- Swatches wrap on small screens.
Performance
- It does not use Motion. The ring is a CSS transition.
- Native radio inputs handle focus and arrow keys, so there are no key listeners.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import ColorSelector, DEFAULT_COLORS and the ColorOption type from @/components/fetaui/color-selector.
- options takes value, label and color, plus disabled per option. color is any CSS color.
- Pass value and onValueChange to control it, or defaultValue to seed it. The first option is the default.
- legend names the group and shows in the header.
Related
Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.SelectComponentChoose one value from a list. The list grows out of the trigger and the highlight glides.Toggle GroupComponentToggles on one tray, for a single choice or several.Theme ToggleComponentA light and dark switch that shows a sun or a moon, so the value reads at a glance.Product DetailsComponentExpandable Text and Review Card composed into a product block.