Select With Color Swatch - Color swatch options

Pro

Select items with color swatches beside each label.
Shadcn Select With Color Swatch component

Component data

ID
select/select-with-color-swatch
Access
pro
Created
May 23, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Select With Color Swatch component design & features

This example renders small color circles inside SelectItem rows for a theme or tag color picker.

Color swatch selects belong in theme settings, label pickers, and design tools where the color itself is part of the choice.