RadioGroup
Pick exactly one option from a short visible list. One piece: legend, options, message.
Master
Switch size, orientation, layout, label position and message. Descriptions and badges show in card layout. Label position start moves the legend into the 234px label column beside the options.
Usage
Use RadioGroup for one choice from two to six options that should stay visible, like a billing cycle. Use Checkbox for independent yes/no choices. The legend names the group; hide it only when a heading already names it. labelPosition start moves the legend into the 234px label column beside the options, so the group lines up with the fields around it. Card layout suits choices that need a description. See contracts/radiogroup.json for the full contract.
Do's
- One choice from two to six visible options.
- Settings where people compare options side by side.
Don'ts
- Do not invent a Radio, RadioItem or RadioLegend cousin.
- Do not use for independent yes/no choices. Use Checkbox.
- Do not use for long lists of options.
- Do not use to switch page panels.
- Do not use an unstyled native radio.
- Do not use raw hex.
- Do not use hideLabel where people need to read the choice. It is for a radio whose row already says it, like a pick column in a table.
<RadioGroup
size="md"
orientation="vertical"
layout="list"
labelPosition="top"
legend="Billing cycle"
defaultValue="annual"
options={[
{ value: "monthly", label: "Monthly", description: "Pay month to month. Cancel anytime." },
{ value: "annual", label: "Annual", description: "Two months free.", badge: "Save 16%", badgeIntent: "success" },
]}
/>