components / 33

marked toggle group

selection should remain visible after the pointer leaves. one choice gets a boundary; many choices build a small constellation.

shadcnnpx shadcn@latest add berkantay/cheez/marked-toggle-group

single

one alignment must survive

left aligned

alignment / required

the mark does not disappear
when the choice matters.

try clearing the active item

ink

size

character

value[left]

<MarkedToggleGroup
  value={alignment}
  onValueChange={setAlignment}
  required
  tone="purple"
  size="medium"
>
  <MarkedToggleGroupItem value="left">left</MarkedToggleGroupItem>
  <MarkedToggleGroupItem value="center">center</MarkedToggleGroupItem>
  <MarkedToggleGroupItem value="right">right</MarkedToggleGroupItem>
</MarkedToggleGroup>

multiple

layers can accumulate

2 visible

human
systemsdraft / 04

multiple mode returns every pressed value. orientation turns the keyboard grammar with the component.

reference

api

Base UI state, Cheez persistence

part	prop	type	default	purpose
Group	`value`	`readonly string[]`	`—`	controlled selected values
Group	`defaultValue`	`readonly string[]`	`[]`	initial uncontrolled values
Group	`onValueChange`	`function`	`—`	selection callback
Group	`multiple`	`boolean`	`false`	allow more than one value
Group	`required`	`boolean`	`false`	prevent clearing the last value
Group	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	focus direction
Group	`loopFocus`	`boolean`	`true`	wrap arrow-key focus
Group	`tone`	`MarkedToggleGroupTone`	`"purple"`	selected ink
Group	`size`	`small \| medium \| large`	`"medium"`	control density
Item	`value`	`string`	`—`	group value identity
Item	`disabled`	`boolean`	`false`	remove from interaction
Item	`tone`	`"default" \| "danger"`	`"default"`	destructive treatment

behavior notes

single mode still uses an array, matching Base UI’s native value shape
required prevents the last active value from being cleared
multiple mode permits any number of independent pressed values
arrow keys follow orientation and loop by default
every item exposes native aria-pressed state
selection and keyboard focus management come from Base UI
no Framer Motion is shipped