Radio Group
Pick one option from a list.
Preview
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
{...props}
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"
}
]}
/>
)
}
]}
/>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