components / 07

marked radio

one choice gets one hand-drawn spark. the rest stay quiet until considered.

shadcnnpx shadcn@latest add berkantay/cheez/marked-radio

live

playground

selected: rushed

drawing rhythm

choose how the mark should feel

calmprecise and consideredrushedfast with visible energychaoticimperfect on purpose

size

layout

character

selected mark

interaction

selected ink

interaction ink

state

<MarkedRadioGroup
  label="drawing rhythm"
  value="rushed"
  orientation="vertical"
  selectedMark="asterisk"
  character="rushed"
  onValueChange={setValue}
>
  <MarkedRadio value="calm">calm</MarkedRadio>
  <MarkedRadio value="rushed">rushed</MarkedRadio>
  <MarkedRadio value="chaotic">chaotic</MarkedRadio>
</MarkedRadioGroup>

composition

choose the character

arrow keys move the decision

mark character

calmprecise and consideredrushedfast with visible energychaoticimperfect on purpose

selection is not a filled UI dot. it is a tiny authored moment, while the native radio behavior stays intact underneath.

reference

api

Base UI semantics, Cheez selection

part	prop	type	default	purpose
Group	`value`	`string`	`—`	controlled selected value
Group	`defaultValue`	`string`	`—`	uncontrolled initial value
Group	`onValueChange`	`function`	`—`	selection callback
Group	`name`	`string`	`—`	native form field name
Group	`label`	`ReactNode`	`—`	accessible group legend
Group	`description`	`ReactNode`	`—`	group helper text
Group	`error`	`ReactNode`	`—`	invalid message and ink
Group	`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	visual layout
Group	`selectedMark`	`CheezType`	`"asterisk"`	selected gesture
Group	`interactionMark`	`CheezType`	`"loose-circle"`	hover and focus gesture
Group	`selectedColor`	`string`	`"#b7ff3c"`	selected ink
Group	`character`	`"calm" \| "rushed" \| "chaotic"`	`"rushed"`	drawing personality
Group	`size`	`"small" \| "medium" \| "large"`	`"medium"`	control scale
Group	`required`	`boolean`	`false`	required form state
Group	`disabled`	`boolean`	`false`	disable every option
Radio	`value`	`string`	`—`	unique submitted value
Radio	`description`	`ReactNode`	`—`	option helper text
Radio	`disabled`	`boolean`	`false`	disable one option
Radio	`marked`	`boolean`	`—`	force interaction mark visibility

behavior notes

arrow keys move between enabled choices
Space selects the focused choice
the group exposes native radiogroup semantics
a hidden input carries the selected value into forms
group and item disabled states are separate
selection marks share one character and color system

playground

states

choose the character

api

behavior notes