form · Normal DOM + Twenty Remote DOM

SegmentedControl

Small inline pill-style toggle — exactly one option selected.

Single-select control for ≤ 4 short labels. Use for view switching, pricing periods, currency mode, polarity flips. Generic over the value union type so usage stays type-safe.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { SegmentedControl } from '@8maverik8/twenty-design';

Examples

Pricing toggle (with label)

Pricing

Annual

Monthly

tsx
<SegmentedControl<'annual' | 'monthly'>
  label="Pricing"
  options={[
    { value: 'annual', label: 'Annual' },
    { value: 'monthly', label: 'Monthly' },
  ]}
  value={pricing}
  onChange={setPricing}
/>

View switcher

List

Board

Calendar

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

Guidelines

✓

Keep labels to 1-2 words.The chips are narrow by design — long labels wrap awkwardly.

Use it for > 4 options.Switch to a Select instead — at that count a segmented control feels crowded.