Segmented control (UI SDK): Disabled

disabled on the control turns it all off and submits nothing. On one item, the arrow keys skip it.

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

function UiSdkSegmentedControlDisabled() {
  return (
    <div className="flex flex-col items-center gap-4">
      <SegmentedControl aria-label="Theme" defaultValue="system" disabled>
        <SegmentedControlItem value="light">Light</SegmentedControlItem>
        <SegmentedControlItem value="dark">Dark</SegmentedControlItem>
        <SegmentedControlItem value="system">System</SegmentedControlItem>
      </SegmentedControl>
      <SegmentedControl aria-label="Model" defaultValue="mini">
        <SegmentedControlItem value="mini">Mini</SegmentedControlItem>
        <SegmentedControlItem value="standard">Standard</SegmentedControlItem>
        <SegmentedControlItem value="pro" disabled>
          Pro
        </SegmentedControlItem>
      </SegmentedControl>
    </div>
  )
}

export { UiSdkSegmentedControlDisabled }

Add this example

This adds the example as components/examples/ui-sdk-segmented-control/disabled.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-disabled.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`	`–`
`disabled`	`boolean`	`false`

SegmentedControlItem

Prop	Type	Default
`value`	`string`	`–`
`disabled`	`boolean`	`false`

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.