Swatch Picker

Keyboard-friendly radiogroup for choosing one color from a fixed palette.

SwatchPicker offers a compact, keyboard-friendly way to choose one color from a fixed palette — theme accents, status colors, or categorical highlights. Declare SwatchPickerItem children with value, color, and label, then control selection with selected_value or seed defaults with default_selected_value. For free-form color editing, use ColorPicker instead; SwatchPicker is for predefined choices only.

  • Pick theme, accent, or categorical colors from a fixed palette
  • Compact color choice without a full color picker surface
  • Keyboard-navigable palette selection in forms and settings
  • Render SwatchPickerItem children with unique value ids and color hex values.
  • Control selection with selected_value or seed uncontrolled state with default_selected_value.
  • Listen to on_selection_change for side effects such as theme updates.
Default row

Horizontal palette with the first swatch selected.

Grid layout

Wrapped grid for denser palettes.

Controlled selection

Parent-owned selection updates when another swatch is clicked.