# Segmented control (UI SDK): Sizes

> `size` is `sm`, `default` or `lg`. Items grow on touch screens.

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

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-sizes.json
```

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

## Source

```tsx title="components/examples/ui-sdk-segmented-control/sizes.tsx"
import {
  SegmentedControl,
  SegmentedControlItem,
} from "@/components/ui/ui-sdk-segmented-control"

const sizes = ["sm", "default", "lg"] as const

function UiSdkSegmentedControlSizes() {
  return (
    <div className="flex flex-col items-center gap-4">
      {sizes.map((size) => (
        <SegmentedControl
          key={size}
          aria-label={`Effort, ${size}`}
          size={size}
          defaultValue="balanced"
        >
          <SegmentedControlItem value="fast">Fast</SegmentedControlItem>
          <SegmentedControlItem value="balanced">Balanced</SegmentedControlItem>
          <SegmentedControlItem value="thorough">Thorough</SegmentedControlItem>
        </SegmentedControl>
      ))}
    </div>
  )
}

export { UiSdkSegmentedControlSizes }
```

## Props in this example

### SegmentedControl

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `T \| null` | – |  |
| `size` | `"sm" \| "default" \| "lg"` | `"default"` |  |

### SegmentedControlItem

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

## More Segmented control examples

- [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)
- [Form](https://hextaui.com/docs/ui-sdk-segmented-control/examples/form)
- [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)