RadioGroup
The radio group component is the preferred way to display multiple radio fields.
View source codeBasic usage
const options: {
value: string;
label: string;
isDisabled?: boolean;
}[] = [
{ value: "daily", label: "Daily" },
{ value: "weekly", label: "Weekly" },
{ value: "yearly", label: "Yearly" },
];
const Demo = () => {
const [selectedValue, setSelectedValue] = useState<string | null>(null);
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setSelectedValue(event.target.value);
};
return (
<RadioGroup
name="myRadioGroup"
value={selectedValue}
onChange={handleChange}
direction="row"
>
{options.map((props) => (
<RadioField {...props} key={props.value} />
))}
</RadioGroup>
);
};
Column
The direction
prop is used to specify the axis the radio buttons should align with.
<RadioGroup direction="column" {...otherProps} />