Radio Group
Pick one option from a list.
Shadcn UI
This component is part of Shadcn UI.
Usage
import { z } from 'zod';
import { AutoForm } from '@vitnode/core/components/form/auto-form';
import { AutoFormRadioGroup } from '@vitnode/core/components/form/fields/radio-group';
const formSchema = z.object({
options: z.enum(['option1', 'option2', 'option3']),
});
<AutoForm
formSchema={formSchema}
fields={[
{
id: 'options',
component: props => (
<AutoFormRadioGroup
description="By checking this box, you agree to the terms and conditions."
label="I agree to the terms and conditions"
labels={[
{
value: 'option1',
label: 'Option 1',
},
{
value: 'option2',
label: 'Option 2',
},
{
value: 'option3',
label: 'Option 3',
},
]}
{...props}
/>
),
},
]}
/>
import { Label } from '@vitnode/core-frontend/components/ui/label';
import {
RadioGroup,
RadioGroupItem,
} from '@vitnode/core-frontend/components/ui/radio-group';
<RadioGroup defaultValue="option-one">
<div className="flex items-center space-x-2">
<RadioGroupItem value="option-one" id="option-one" />
<Label htmlFor="option-one">Option One</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="option-two" id="option-two" />
<Label htmlFor="option-two">Option Two</Label>
</div>
</RadioGroup>
Props
Prop | Type | Default |
---|---|---|
labels? | { value: string; label: string }[] | [] |
description? | string | - |
label? | string | - |