Segmented Control

A linear set of two or more segments, each of which functions as a radio input, and a default value is required.

API Reference

Component segmented-control-demo not found in registry.

Installation

Install the following dependencies:

Copy and paste the following code into your project:

Usage

import {
  SegmentedControl,
  SegmentedControlIndicator,
  SegmentedControlItem,
  SegmentedControlItemInput,
  SegmentedControlItemLabel,
  SegmentedControlItems,
  SegmentedControlList,
} from "@components/ui/segmented-control"
<SegmentedControl>
  <SegmentedControlList>
    <SegmentedControlIndicator />
    <SegmentedControlItems>
      <SegmentedControlItem>
        <SegmentedControlItemInput />
        <SegmentedControlItemLabel />
      </SegmentedControlItem>
    </SegmentedControlItems>
  </SegmentedControlList>
</SegmentedControl>

Examples

Orientation

The segmented control orientation prop can be used to change the segmented control's orientation.

Component segmented-control-orientation-demo not found in registry.

SearchSelect