Radio
Radio buttons allow users to select a single option from a set. Group them using the same name attribute.
Default
A standard radio group. Only one option can be selected at a time within the same name group.
With hint
Use hint to provide additional context below a radio option.
Disabled
Add disabled to prevent interaction on individual options.
Usage
Group radio buttons by giving them the same name prop. Each option needs a unique value. Use hint for helper text below individual options.
Explore the Radio component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.
Properties
Disabled
<Radio label="Tropical zone" name="zone" value="tropical" />