Segmented control (UI SDK): Sizes

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

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 }

Add this example

This adds the example as components/examples/ui-sdk-segmented-control/sizes.tsx, together with the Segmented control component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-segmented-control-sizes.json

To add only the component, follow the Segmented control installation.

Props in this example

The Segmented control props this example sets, from the API reference.

SegmentedControl

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

SegmentedControlItem

Prop	Type	Default
`value`	`string`	`–`

Every prop is in the Segmented control API reference.

More Segmented control examples

See them all, with keyboard support and accessibility notes, on the Segmented control page.