Radio
Single and multi choice controls with optional ChoiceBox cards.
When to use
Use Radio when you need single and multi choice controls with optional choicebox cards.
Import
TypeScript
import { Radio } from '@gzodo/ui'Radio is a native input with a custom dot. Use Radio alone for one option, or Radio.Group for a controlled set. choiceBox turns each option into a selectable card. multiple switches the group to checkbox inputs while keeping the same visual.
Examples
4Group
Controlled
value and onChange with shared name.Choice boxes
variant="choiceBox" adds a bordered card and optional description.Multiple grid
multiple allows several selected values. layout="grid" wraps by minItemWidth.Standalone
A single Radio with label position and sizes.
Radio
5Radio
Property
Description
Type
Default
labelPrimary text next to the control.
ReactNode—
descriptionSecondary text under the label.
ReactNode—
variantPlain row or selectable card.
'default' | 'choiceBox''default'sizeControl and label size.
'sm' | 'md' | 'lg' | 'xl''md'inputTypeNative input type. Group sets checkbox when multiple.
'radio' | 'checkbox''radio'Radio.Group
5Radio.Group
Property
Description
Type
Default
options{ value, label, description?, disabled? }.
RadioOption[]—
value / onChangeSingle value, or an array when multiple is true.
T | T[]—
multipleAllow several selected options.
booleanfalselayoutFlex wrap or auto-fill CSS grid.
'flex' | 'grid''flex'directionFlex direction when layout is flex.
'row' | 'column''row'