Forms

Segmented control

Pick one of a few modes in place, such as Form, JSON or AI.

import { SegmentedControl } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Editor modes

Editing in FORM mode.

Show code

segmented-control/modes.tsx

'use client';

import { SegmentedControl, Stack, Text } from '@jsonresume/ui';
import { Braces, FormInput, Sparkles } from 'lucide-react';
import { useState } from 'react';

export default function SegmentedControlModes() {
  const [mode, setMode] = useState('form');
  return (
    <Stack gap={3}>
      <SegmentedControl
        label="Editor mode"
        value={mode}
        onValueChange={setMode}
        options={[
          { value: 'form', label: 'Form', icon: <FormInput /> },
          { value: 'json', label: 'JSON', icon: <Braces /> },
          { value: 'ai', label: 'AI', icon: <Sparkles /> },
        ]}
      />
      <Text size="xs" tone="muted">
        Editing in {mode.toUpperCase()} mode.
      </Text>
    </Stack>
  );
}

Usage

Do

Use for two to five short, mutually exclusive modes.

Don’t

Use to switch panels of content: use Tabs.
Use for navigation: use TabNav.

Accessibility

A labelled radio group: Tab enters, arrow keys move and select.

Props

Also accepts the attributes of the element SegmentedControl renders.
Prop	Type	Default	Description
label required	string	–	Names the group, e.g. "Editor mode".
options required	SegmentedOption[]	–
className	string	–
defaultValue	string	–
onValueChange	((value: string) => void)	–
value	string	–