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",
description: "This is the description for option 1",
},
{
value: "option2",
label: "Option 2",
},
{
value: "option3",
label: "Option 3",
description: "This is the description for option 3",
disabled: true,
},
]}
/>
),
},
]}
/>variant="block"
You can also use the block variant to display the radio buttons in a block style.
<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"
variant="block"
labels={[
{
value: "option1",
label: "Option 1",
description: "This is the description for option 1",
},
{
value: "option2",
label: "Option 2",
},
{
value: "option3",
label: "Option 3",
description: "This is the description for option 3",
disabled: true,
},
]}
/>
),
},
]}
/>Props
Prop
Type