BoM Daily / design

components

RadioGroup

A single-select control built on Radix RadioGroup. Each option is a 44px touch row with a circular control that fills with the primary tone when selected, and the label is clickable.

Basic

Controlled, with a clickable label per option.

States

A disabled option sits inside an otherwise active group, and the whole group can be disabled.

Props

PropTypeDefaultDescription
options{ value, label, disabled? }[]noneThe options to render, each with a value, label, and optional disabled flag.
valuestringnoneControlled selected value.
defaultValuestringnoneUncontrolled initial value.
onValueChange(v: string) => voidnoneChange handler.
namestringnoneForm field name for the group.
disabledbooleanfalseDisable the whole group.