SegmentController

A pill-shaped segmented control with an animated sliding indicator. Supports single-select mode with options objects containing labels, icons, and per-option disabled state.

Import

tsx

import { SegmentController } from '@tac-ui/native';
import type { SegmentOption } from '@tac-ui/native';

Playground

Interactively configure the SegmentController props below.

All

Active

Inactive

Size

Disabled

tsx

<SegmentController
  options={[
    { value: 'all', label: 'All' },
    { value: 'active', label: 'Active' },
    { value: 'inactive', label: 'Inactive' },
  ]}
  size="md"
/>

Default

A basic single-select segmented control that uses a spring-animated sliding background to indicate the active segment. The first option is selected by default.

All

Active

Inactive

tsx

<SegmentController options={[
  { value: 'all', label: 'All' },
  { value: 'active', label: 'Active' },
  { value: 'inactive', label: 'Inactive' },
]} />

Sizes

Three size variants — sm, md (default), and lg — adjust the height, padding, and font size of the control.

All

Active

Inactive

All

Active

Inactive

All

Active

Inactive

tsx

<SegmentController options={options} size="sm" />
<SegmentController options={options} size="md" />
<SegmentController options={options} size="lg" />

With Icons

Pass an icon node in each option to render it inline before the label text.

Grid

List

Board

tsx

import { Grid2x2, List, LayoutGrid } from '@tac-ui/icon-native';

<SegmentController options={[
  { value: 'grid', label: 'Grid', icon: <Grid2x2 size={14} /> },
  { value: 'list', label: 'List', icon: <List size={14} /> },
  { value: 'board', label: 'Board', icon: <LayoutGrid size={14} /> },
]} />

Disabled Options

Individual options can be disabled by setting disabled: true on the option object, rendering them at reduced opacity and blocking interaction.

Daily

Weekly

Monthly

tsx

<SegmentController options={[
  { value: 'daily', label: 'Daily' },
  { value: 'weekly', label: 'Weekly' },
  { value: 'monthly', label: 'Monthly', disabled: true },
]} />

Disabled

The disabled prop disables the entire control, reducing its opacity and blocking all interactions.

All

Active

Inactive

tsx

<SegmentController options={options} disabled />

Controlled

In controlled mode, pass value and onValueChange to manage selection state externally — useful for syncing the control with other UI state.

All

Active

Inactive

tsx

const [value, setValue] = useState('all');
<SegmentController options={options} value={value} onValueChange={setValue} />

API Reference

Prop	Type	Default	Description
options	SegmentOption[]	-	Array of segment options to render. Each option has value, label, optional icon, and optional disabled.
value	string	-	Controlled selected value.
onValueChange	(value: string) => void	-	Called when selection changes.
size	"sm" \| "md" \| "lg"	"md"	Size variant affecting height and font size.
disabled	boolean	false	Disables the entire control, blocking all interaction and reducing opacity.
style	ViewStyle	-	Additional styles applied to the root container.

Legacy API (backward compatible)

Prop	Type	Default	Description
items	string[]	-	Deprecated. Use options instead. Array of segment label strings.
selectedIndex	number	0	Deprecated. Use value instead. Index of the currently selected segment.
onSelect	(index: number) => void	-	Deprecated. Use onValueChange instead. Called with the index of the pressed segment.