# Segmented control (UI SDK): Form

> Each item holds a hidden native radio, so `name` submits the checked value, `required` waits for a choice, and a reset returns to the default.

Canonical: https://hextaui.com/docs/ui-sdk-segmented-control/examples/form

Component docs: https://hextaui.com/docs/ui-sdk-segmented-control

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-segmented-control-form.json
```

This adds `components/examples/ui-sdk-segmented-control/form.tsx` with the Segmented control component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-segmented-control/form.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  SegmentedControl,
  SegmentedControlItem,
} from "@/components/ui/ui-sdk-segmented-control"

function UiSdkSegmentedControlForm() {
  const [saved, setSaved] = React.useState<string | null>(null)

  return (
    <form
      className="flex flex-col items-start gap-4"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        setSaved(`theme=${data.get("theme")}, density=${data.get("density")}`)
      }}
    >
      <div className="flex flex-col gap-2">
        <p id="form-theme" className="m-0 text-sm font-medium">
          Theme
        </p>
        <SegmentedControl
          aria-labelledby="form-theme"
          name="theme"
          defaultValue="system"
          required
        >
          <SegmentedControlItem value="light">Light</SegmentedControlItem>
          <SegmentedControlItem value="dark">Dark</SegmentedControlItem>
          <SegmentedControlItem value="system">System</SegmentedControlItem>
        </SegmentedControl>
      </div>
      <div className="flex flex-col gap-2">
        <p id="form-density" className="m-0 text-sm font-medium">
          Density
        </p>
        <SegmentedControl
          aria-labelledby="form-density"
          name="density"
          defaultValue="comfortable"
        >
          <SegmentedControlItem value="compact">Compact</SegmentedControlItem>
          <SegmentedControlItem value="comfortable">
            Comfortable
          </SegmentedControlItem>
        </SegmentedControl>
      </div>
      <div className="flex items-center gap-3">
        <Button type="submit" size="sm">
          Save
        </Button>
        <Button type="reset" size="sm" variant="ghost">
          Reset
        </Button>
      </div>
      <p className="m-0 text-sm text-muted-foreground">
        {saved ? `Saved ${saved}` : "Nothing saved yet."}
      </p>
    </form>
  )
}

export { UiSdkSegmentedControlForm }
```

## Props in this example

### SegmentedControl

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `T \| null` | – |  |
| `required` | `boolean` | `false` |  |
| `name` | `string` | – |  |

### SegmentedControlItem

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

## More Segmented control examples

- [Sizes](https://hextaui.com/docs/ui-sdk-segmented-control/examples/sizes)
- [Icons](https://hextaui.com/docs/ui-sdk-segmented-control/examples/icons)
- [Full width](https://hextaui.com/docs/ui-sdk-segmented-control/examples/full-width)
- [Vertical](https://hextaui.com/docs/ui-sdk-segmented-control/examples/vertical)
- [Disabled](https://hextaui.com/docs/ui-sdk-segmented-control/examples/disabled)
- [Controlled](https://hextaui.com/docs/ui-sdk-segmented-control/examples/controlled)
- [Read-only](https://hextaui.com/docs/ui-sdk-segmented-control/examples/read-only)
- [Right to left](https://hextaui.com/docs/ui-sdk-segmented-control/examples/rtl)