Inputs

SegmentedControl

Two to four mutually exclusive options in one pill, as a radio group.

• Provide label (for the group), options {value,label,icon?}, value, onChange.
• Used for Appearance (Light/Dark/System) and layout choices. Five or more options → a Menu.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface SegmentedControlProps {
  label: string;
  options: { value: string;
  label: string;
  icon?: IconName }[];
  value: string;
  onChange?: (value: string) => void;
  size?: 'sm' | 'md'
}

Use

import { SegmentedControl } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/SegmentedControl/README.md