# Radio group: Form

> Inside `Field` and `FieldSet`, the group gets a legend, required validation and an error message.

Example: https://hextaui.com/docs/radio-group/examples/form
Component docs: https://hextaui.com/docs/radio-group.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/radio-group-form.json
```

This adds `components/examples/radio-group/form.tsx` with the Radio group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/radio-group/form.tsx"
"use client"

import * as React from "react"
import { Form } from "@base-ui/react/form"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldError,
  FieldItem,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioGroupForm() {
  const [submitted, setSubmitted] = React.useState<string>()

  return (
    <Form
      className="flex w-full max-w-xs flex-col items-start gap-4"
      onSubmit={(event) => {
        event.preventDefault()
        setSubmitted(String(new FormData(event.currentTarget).get("shipping")))
      }}
    >
      <Field name="shipping">
        <FieldSet render={<RadioGroup required />}>
          <FieldLegend variant="label">Shipping</FieldLegend>
          {["Standard", "Express", "Overnight"].map((option) => (
            <FieldItem key={option}>
              <RadioGroupItem value={option.toLowerCase()} />
              <FieldLabel>{option}</FieldLabel>
            </FieldItem>
          ))}
        </FieldSet>
        <FieldError match="valueMissing">Choose a shipping speed.</FieldError>
      </Field>
      <Button type="submit" size="sm">
        Continue
      </Button>
      <output className="text-sm text-muted-foreground">
        {submitted ? `shipping=${submitted}` : "Nothing submitted yet."}
      </output>
    </Form>
  )
}
```

## Props in this example

### RadioGroupItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |

## More Radio group examples

- [Cards](https://hextaui.com/docs/radio-group/examples/cards.md)
- [Horizontal](https://hextaui.com/docs/radio-group/examples/horizontal.md)
- [Disabled and read-only](https://hextaui.com/docs/radio-group/examples/states.md)
- [Controlled](https://hextaui.com/docs/radio-group/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/radio-group/examples/rtl.md)