Radio Button Group
Allows single selection from multiple options.
Allows single selection from multiple options.
import { RadioButtonGroup } from '@tacos-ui/react';
export const Demo = (props: RadioButtonGroup.RootProps) => {
const options = [{ value: 'S' }, { value: 'M' }, { value: 'L', disabled: true }, { value: 'XL' }];
return (
<RadioButtonGroup.Root defaultValue="M" {...props}>
{options.map((option, id) => (
<RadioButtonGroup.Item disabled={option.disabled} key={id} px="0" value={option.value}>
<RadioButtonGroup.ItemControl />
<RadioButtonGroup.ItemText>{option.value}</RadioButtonGroup.ItemText>
<RadioButtonGroup.ItemHiddenInput />
</RadioButtonGroup.Item>
))}
</RadioButtonGroup.Root>
);
};
Previous
PopoverNext
Radio Group