Radio
Radio buttons allow users to make a single selection among a group of options.
import { Radio, RadioGroup, RadioPrimitive, useRadioGroupState, useRadioGroupItem } from '@balance-web/radio';Usage
The Radio component maps to a radio input and a label. The label is
provided as children to the component. If you need custom label behaviour use
the RadioPrimitive component.
Controlled
The Radio component passes on the original event through the onChange handler. Use the event target's checked property to get the latest value and update state accordingly.
Size
The Radio is available in a "small" size.
Groups
Use the RadioGroup to implement a group of radios. Each Radio within a group must have a "value" prop.
Building a custom radio group
RadioGroup/Radio are themselves built on two hooks —
useRadioGroupState (called once, at the group level, to derive a shared
name and centralise disabled/invalid/size/onChange) and
useRadioGroupItem (called per-item, combining that shared state with the
item's own value into the props a single radio input needs). Reach for
these directly when building a group of custom-rendered options that need
native radio-group semantics without using Radio's own markup — this is how
RadioCardGroup and the RadioList
variant are built.
Primitive
Use the RadioPrimitive to implement custom behaviours and appearances.