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

API Reference

Radix UI - Radio Group

Radio Group - VitNode