Segmented control (UI SDK): Right to left

The items run from the right, and the indicator follows them.

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

function UiSdkSegmentedControlRtl() {
  return (
    <div dir="rtl" lang="ar">
      <SegmentedControl aria-label="العرض" defaultValue="list">
        <SegmentedControlItem value="list">قائمة</SegmentedControlItem>
        <SegmentedControlItem value="grid">شبكة</SegmentedControlItem>
        <SegmentedControlItem value="board">لوحة</SegmentedControlItem>
      </SegmentedControl>
    </div>
  )
}

export { UiSdkSegmentedControlRtl }

Add this example

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

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.