Segmented control

01Preview

Change the controls to try every supported combination. The control is controlled here, so the code follows each click.

import { SegmentedControl } from '@nuton/ui'
import { RiCheckboxCircleLine, RiFolder5Line, RiTimeLine } from '@remixicon/react'

const options = [
  { value: 'all', label: 'All', icon: <RiFolder5Line /> },
  { value: 'progress', label: 'In progress', icon: <RiTimeLine /> },
  { value: 'completed', label: 'Completed', icon: <RiCheckboxCircleLine /> },
]

const [filter, setFilter] = useState('all')

<SegmentedControl
  aria-label="Course filter"
  options={options}
  value={filter}
  onValueChange={setFilter}
/>

02Installation

pnpm add @nuton/ui @nuton/tokens

npm install @nuton/ui @nuton/tokens

yarn add @nuton/ui @nuton/tokens

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { SegmentedControl } from '@nuton/ui'
import { RiBookReadLine, RiMicroscopeLine } from '@remixicon/react'

<SegmentedControl
  aria-label="Learning mode"
  options={[
    { value: 'course', label: 'Course', icon: <RiBookReadLine /> },
    { value: 'research', label: 'Research', icon: <RiMicroscopeLine /> },
  ]}
  value={mode}
  onValueChange={setMode}
/>

• Use it to choose a value that changes how the current view or the next step works: a mode, a filter, a layout. It is a radio group: one Tab stop, and arrow keys move and select.
• When each option shows its own panel of content, use Tabs. For the same pill look with tab semantics, put SegmentedTabsList and SegmentedTabsTrigger inside Tabs with TabsContent panels.
• Keep it to 2–5 short options. For more, or for long labels, use a Select or a Radio group.
• Name the group with aria-label or aria-labelledby (“Learning mode”, “Library view”).
• Options always have a label. With iconOnly the label becomes the accessible name and the tooltip.

04Variants and sizes

Two appearances and three sizes. With fullWidth the track fills its container and the options share the spare width.

Appearances

lighter (default) is the shipped Course / Research switch: a white pill on a light track (Figma 3842:31335). filled is the first Learning Tab: a black pill with white text on a stroked track (Figma 211:2887).

<SegmentedControl aria-label="Learning mode" options={modes} defaultValue="course" />
<SegmentedControl aria-label="Learning mode" options={modes} defaultValue="course" appearance="filled" />

Sizes

<SegmentedControl aria-label="Mode" options={modes} size="sm" />
<SegmentedControl aria-label="Mode" options={modes} size="md" />
<SegmentedControl aria-label="Mode" options={modes} size="lg" />

Icon only

<SegmentedControl
  aria-label="Library view"
  iconOnly
  options={[
    { value: 'grid', label: 'Grid view', icon: <RiLayoutGridLine /> },
    { value: 'list', label: 'List view', icon: <RiListUnordered /> },
  ]}
/>

05States and interactions

Motion

The pill slides between options in 200 ms with the standard easing (--nu-duration-base, --nu-ease-standard). With reduced motion it moves instantly. Before the page has run JavaScript, the selected option paints its own pill, so the server render already shows the choice.

State tokens

Set on .nu-segmented.

06Composition examples

Course or Research

The live New page switch. The choice changes what Nuton builds next, so it is a value: a radio group.

const [mode, setMode] = useState<'course' | 'research'>('course')

<SegmentedControl
  aria-label="Learning mode"
  options={[
    { value: 'course', label: 'Course', icon: <RiBookReadLine /> },
    { value: 'research', label: 'Research', icon: <RiMicroscopeLine /> },
  ]}
  value={mode}
  onValueChange={setMode}
/>

Library Grid or List

Icon-only, small, beside the course count. The labels name each option and appear as tooltips (the live toggles have no names today).

<SegmentedControl
  aria-label="Library view"
  iconOnly
  size="sm"
  options={[
    { value: 'grid', label: 'Grid view', icon: <RiLayoutGridLine /> },
    { value: 'list', label: 'List view', icon: <RiListUnordered /> },
  ]}
  value={view}
  onValueChange={setView}
/>

AI Tutor answer mode

Small, with a description per option. The description is a tooltip and the option's accessible description.

<SegmentedControl
  aria-label="Answer mode"
  size="sm"
  options={[
    { value: 'grounded', label: 'Grounded', description: 'Answers only from your material' },
    { value: 'research', label: 'Research', description: 'Also searches the web and cites sources' },
  ]}
  value={mode}
  onValueChange={setMode}
/>

Switching panels: use tabs

“My study materials” and “Learn something new” each show a different panel, so they are tabs. SegmentedTabsList gives Tabs the segmented look; the hidden panel is removed, so nothing invisible stays focusable (a live-app issue today).

import { SegmentedTabsList, SegmentedTabsTrigger, Tabs, TabsContent } from '@nuton/ui'

<Tabs defaultValue="materials">
  <SegmentedTabsList aria-label="Start learning" size="lg" appearance="filled" fullWidth>
    <SegmentedTabsTrigger value="materials" icon={<RiFolder5Line />}>My study materials</SegmentedTabsTrigger>
    <SegmentedTabsTrigger value="new" icon={<RiLightbulbFlashLine />}>Learn something new</SegmentedTabsTrigger>
  </SegmentedTabsList>
  <TabsContent value="materials">…</TabsContent>
  <TabsContent value="new">…</TabsContent>
</Tabs>

07API reference

SegmentedControl props

SegmentedTabsList and SegmentedTabsTrigger props

Accessibility

You must: name the group, give every option a label (even icon-only), and use Tabs, not this control, when options switch panels.

Figma mapping

08Guidelines and related components

Do and don't

Related components

• TabsSwitch between panels of content.
• Button groupA row of related actions.
• RadioChoose one of many options, with longer labels.
• SwitchTurn one setting on or off.