Radio Group

Pick one option from a list.

Preview

By checking this box, you agree to the terms and conditions.

This is the description for option 1

This is the description for option 3

By checking this box, you agree to the terms and conditions.

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

API Reference

Base UI - Radio Group