Radio Group

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,
            },
          ]}
        />
      ),
    },
  ]}
/>

import {
  RadioGroup,
  RadioGroupItem,
} from '@vitnode/core/components/ui/radio-group';
import { Field, FieldLabel } from "@vitnode/core/components/ui/field"

<RadioGroup defaultValue="option-one">
  <Field orientation="horizontal">
    <RadioGroupItem value="option-one" id="option-one" />
    <FieldContent>
      <FieldLabel htmlFor="option-one">Option One</FieldLabel>
      <FieldDescription>
        This is the description for option one. It provides more information
        about the option.
      </FieldDescription>
    </FieldContent>
  </Field>

  <Field orientation="horizontal">
    <RadioGroupItem value="option-two" id="option-two" />
    <FieldContent>
      <FieldLabel htmlFor="option-two">Option Two</FieldLabel>
    </FieldContent>
  </Field>

  <Field orientation="horizontal" data-disabled>
    <RadioGroupItem value="option-three" id="option-three" disabled />
    <FieldContent>
      <FieldLabel htmlFor="option-three">Option Three</FieldLabel>
      <FieldDescription>
        This is the description for option three. It provides more information
        about the option.
      </FieldDescription>
    </FieldContent>
  </Field>
</RadioGroup>