const Demo = () => {
const [selectedValue, setSelectedValue] = useState<string | null>(null);
return (
<RadioGroup
name="cardType"
value={selectedValue}
onChange={(event) => {
setSelectedValue(event?.target.value);
}}
direction="column"
className="gap-8"
>
<RadioBox
label="Administrator"
description="An admin can set-up the account"
value="administrator"
/>
<RadioBox
label="Controller"
description="A controller has access to all accounting features"
value="controller"
/>
<RadioBox
label="Requester"
description="A requester can request and make purchases"
value="requester"
/>
</RadioGroup>
);
};
RadioGroup only works in a controlled mode.
To define a default value, use useState.
const Demo = () => {
const [selectedValue, setSelectedValue] = useState<string | null>(
"administrator"
);
return (
<RadioGroup
name="cardType"
value={selectedValue}
onChange={(event) => {
setSelectedValue(event?.target.value);
}}
direction="column"
className="gap-8"
>
<RadioBox
label="Administrator"
description="An admin can set-up the account"
value="administrator"
/>
<RadioBox
label="Controller"
description="A controller has access to all accounting features"
value="controller"
/>
<RadioBox
label="Requester"
description="A requester can request and make purchases"
value="requester"
/>
</RadioGroup>
);
};
Use the iconName prop to add an icon to the RadioBox.
<RadioGroup {...otherProps}>
<RadioBox
iconName="single-purchase-card"
label="Single use"
description="If you need to make a one-time payment"
value="singleUse"
/>
<RadioBox
iconName="recurring-card"
label="Recurring"
description="If you want to manage your subscriptions"
value="recurring"
/>
</RadioGroup>
The description prop is optional.
<RadioGroup {...otherProps}>
<RadioBox label="Yes" value="yes" />
<RadioBox label="No" value="no" />
</RadioGroup>