VitNode
Forms

Radio Group

A collection of radio buttons where only one option can be selected at a time, ensuring mutual exclusivity.

Shadcn UI

This component is part of Shadcn UI.

Preview

Usage

import { z } from 'zod';
import { AutoForm } from 'vitnode-frontend/form/auto-form';
import { AutoFormRadioGroup } from 'vitnode-frontend/form/fields/radio-group';
const formSchema = z.object({
  type: z.enum(['option-one', 'option-two']),
});
// or
const formSchema = z.object({
  type: z.nativeEnum(RadioGroupExampleEnum),
});
<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'type',
      component: props => (
        <AutoFormRadioGroup
          {...props}
          labels={{
            ['option-one']: {
              title: 'Option One',
              description: 'Option One Description',
            },
            ['option-two']: {
              title: 'Option Two',
              description: 'Option Two Description',
            },
          }}
        />
      ),
    },
  ]}
/>

API Reference

Radix UI Radio Group.

On this page