SegmentedControl

Radix

Animated

A horizontal group of mutually exclusive options presented as connected buttons. Acts as a more visual alternative to radio groups for small option sets.

Form Inputstogglesegmentswitchgroup

Simple

import { SimpleSegmentedControl } from '@primstack/ui/segmented-control'

<SimpleSegmentedControl
  options={[
    { value: 'list', label: 'List' },
    { value: 'grid', label: 'Grid' },
  ]}
  value="list"
  onValueChange={setValue}
/>

View switcher

import { SegmentedControl } from '@primstack/ui'

<SegmentedControl
  options={[{ label: 'Grid', value: 'grid' }, { label: 'List', value: 'list' }, { label: 'Board', value: 'board' }]}
  value={view}
  onChange={setView}
/>

Related Components