ChoiceGroup

A single choice shown as options you can see all at once. pill for quick filters (the chosen one is ink-filled), outline for form choices such as Type or Priority (the chosen one gains an ink ring), bare when each option is already a Chip.

import { ChoiceGroup } from "@puckoops/camelot";
NameDescriptionDefaultControl
options*
ChoiceOption<T>[]		-
value
T		--
defaultValue
T		-
onValueChange
(value: T) => void		--
aria-label
string		-
aria-labelledby
string		-
look
How the options are drawn
"pill""outline""bare"		"outline"
look
className
string		-

When to use

look="pill" for quick filters (the chosen one is ink-filled), look="outline" for form choices such as Type or Priority, look="bare" when each option is itself a Chip.

  • Use Select instead when there are more than about six options.
  • Use SegmentedControl instead when the choice switches a view.

Examples

Pill

The tracker's quick filters; the chosen one is ink.

Bare

Status as chips; the chosen chip gains the ring.

Priority

Priority as glyph and ink inside outlined options.

Controlled

Starts with nothing chosen; the first option takes focus from the keyboard.

Nothing chosen yet

All Variants

Pill, outline and bare, each with a choice made.