SegmentedControl

Segmented control component for mutually exclusive options.

SegmentedControl

SegmentedControl is a navigation component for selecting between mutually exclusive options, similar to a radio group but with a horizontal button-like appearance.

Import

import { SegmentedControl } from 'radix-native-ui';

Usage

import { SegmentedControl } from 'radix-native-ui';

<SegmentedControl.Root defaultValue="day">
  <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
  <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
  <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
</SegmentedControl.Root>

Components

SegmentedControl.Root

The root container component that manages selection state.

SegmentedControl.Item

Individual option item.

SegmentedControl.Value

Text content for an item with automatic color handling based on selection state. Use this for proper text styling within items.

SegmentedControl.Icon

Icon element for an item with automatic color and size handling based on selection state. Use this to ensure icons match the text color.

Props

SegmentedControl.Root

SegmentedControl.Item

SegmentedControl.Value

SegmentedControl.Icon

Examples

Basic Segmented Control

<SegmentedControl.Root defaultValue="list">
  <SegmentedControl.Item value="list">List</SegmentedControl.Item>
  <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
</SegmentedControl.Root>

Sizes

<SegmentedControl.Root size={1} defaultValue="option1">
  <SegmentedControl.Item value="option1">Small</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Small</SegmentedControl.Item>
</SegmentedControl.Root>

<SegmentedControl.Root size={2} defaultValue="option1">
  <SegmentedControl.Item value="option1">Medium</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Medium</SegmentedControl.Item>
</SegmentedControl.Root>

<SegmentedControl.Root size={3} defaultValue="option1">
  <SegmentedControl.Item value="option1">Large</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Large</SegmentedControl.Item>
</SegmentedControl.Root>

<SegmentedControl.Root size={4} defaultValue="option1">
  <SegmentedControl.Item value="option1">Extra Large</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Extra Large</SegmentedControl.Item>
</SegmentedControl.Root>

Colors

<SegmentedControl.Root color="blue" defaultValue="option1">
  <SegmentedControl.Item value="option1">Blue</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Blue</SegmentedControl.Item>
</SegmentedControl.Root>

<SegmentedControl.Root color="green" defaultValue="option1">
  <SegmentedControl.Item value="option1">Green</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Green</SegmentedControl.Item>
</SegmentedControl.Root>

With Radius

<SegmentedControl.Root radius="small" defaultValue="option1">
  <SegmentedControl.Item value="option1">Small Radius</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Small Radius</SegmentedControl.Item>
</SegmentedControl.Root>

<SegmentedControl.Root radius="large" defaultValue="option1">
  <SegmentedControl.Item value="option1">Large Radius</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Large Radius</SegmentedControl.Item>
</SegmentedControl.Root>

<SegmentedControl.Root radius="full" defaultValue="option1">
  <SegmentedControl.Item value="option1">Full</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Full</SegmentedControl.Item>
</SegmentedControl.Root>

Controlled

function ControlledSegmentedControl() {
  const [view, setView] = useState('list');

  return (
    <Flex direction="column" gap={3}>
      <SegmentedControl.Root value={view} onValueChange={setView}>
        <SegmentedControl.Item value="list">List</SegmentedControl.Item>
        <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
        <SegmentedControl.Item value="table">Table</SegmentedControl.Item>
      </SegmentedControl.Root>

      {view === 'list' && <ListView />}
      {view === 'grid' && <GridView />}
      {view === 'table' && <TableView />}
    </Flex>
  );
}

With Disabled Item

<SegmentedControl.Root defaultValue="enabled">
  <SegmentedControl.Item value="enabled">Enabled</SegmentedControl.Item>
  <SegmentedControl.Item value="disabled" disabled>
    Disabled
  </SegmentedControl.Item>
  <SegmentedControl.Item value="another">Another</SegmentedControl.Item>
</SegmentedControl.Root>

Disabled Control

<SegmentedControl.Root defaultValue="option1" disabled>
  <SegmentedControl.Item value="option1">Disabled</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">Disabled</SegmentedControl.Item>
</SegmentedControl.Root>

With Value Component

Use SegmentedControl.Value for proper text styling with automatic color handling:

<SegmentedControl.Root defaultValue="day">
  <SegmentedControl.Item value="day">
    <SegmentedControl.Value>Day</SegmentedControl.Value>
  </SegmentedControl.Item>
  <SegmentedControl.Item value="week">
    <SegmentedControl.Value>Week</SegmentedControl.Value>
  </SegmentedControl.Item>
  <SegmentedControl.Item value="month">
    <SegmentedControl.Value>Month</SegmentedControl.Value>
  </SegmentedControl.Item>
</SegmentedControl.Root>

With Icon

Use SegmentedControl.Icon to display icons that automatically match the text color:

import { List, Grid, Table } from 'lucide-react-native';

<SegmentedControl.Root defaultValue="grid">
  <SegmentedControl.Item value="list">
    <SegmentedControl.Icon>
      <List />
    </SegmentedControl.Icon>
  </SegmentedControl.Item>
  <SegmentedControl.Item value="grid">
    <SegmentedControl.Icon>
      <Grid />
    </SegmentedControl.Icon>
  </SegmentedControl.Item>
  <SegmentedControl.Item value="table">
    <SegmentedControl.Icon>
      <Table />
    </SegmentedControl.Icon>
  </SegmentedControl.Item>
</SegmentedControl.Root>

Time Range Selector

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={3}>Analytics</Heading>
    <SegmentedControl.Root defaultValue="7d">
      <SegmentedControl.Item value="24h">24h</SegmentedControl.Item>
      <SegmentedControl.Item value="7d">7d</SegmentedControl.Item>
      <SegmentedControl.Item value="30d">30d</SegmentedControl.Item>
      <SegmentedControl.Item value="90d">90d</SegmentedControl.Item>
    </SegmentedControl.Root>
    <Text>Showing data for the last 7 days</Text>
  </Flex>
</Card>

View Toggle

<Flex direction="row" justify="between" align="center">
  <Heading size={3}>Products</Heading>
  <SegmentedControl.Root defaultValue="grid">
    <SegmentedControl.Item value="list">
      <SegmentedControl.Icon>
        <List />
      </SegmentedControl.Icon>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="grid">
      <SegmentedControl.Icon>
        <Grid />
      </SegmentedControl.Icon>
    </SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>

Haptic Feedback

Segmented control items provide haptic feedback by default when selected. You can disable this on the Root component with the hapticFeedback prop:

<SegmentedControl.Root defaultValue="option1" hapticFeedback={false}>
  <SegmentedControl.Item value="option1">No haptic</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">No haptic</SegmentedControl.Item>
</SegmentedControl.Root>

High Contrast

<SegmentedControl.Root defaultValue="option1" highContrast>
  <SegmentedControl.Item value="option1">High Contrast</SegmentedControl.Item>
  <SegmentedControl.Item value="option2">High Contrast</SegmentedControl.Item>
</SegmentedControl.Root>

Related

• Tabs - Tabs component
• RadioGroup - Radio group component