SegmentedControl

When to use

SegmentedControl is a single choice among two to five views or filters of the same content: daily, weekly, monthly; list or grid. The choice applies at once and the content changes in place.

When not to use

• To switch between different panels: If the panel changes, use Tabs.
• For settings that stay on or off: Use Toggle or ToggleGroup.
• For more than five options: Use a Select.
• For choices in a form that need confirming: Use radio buttons.

Anatomy

DailyWeeklyMonthly

LightDark

Copy code

import { Provider, SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Daily' },
  { value: 'week', label: 'Weekly' },
  { value: 'month', label: 'Monthly' },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <SegmentedControl label="Period" items={items} defaultValue="week" />
    </Provider>
  );
}

1. Track: A layer background; radiogroup role and a required label.
2. Pill: A raised surface that slides under the selected option; decorative.
3. Option: A label in the radio role with an optional icon.

Behaviour

• Click or Space selects an option. Arrow keys move to the next option and select it; they skip disabled options and wrap at the ends.
• The group has a single tab stop; Tab lands on the selected option.
• The pill slides to the new option on a spring; on first render it appears in place without sliding. With reduced motion it moves at once.
• A pressed option shrinks slightly and springs back on release.
• With name the value is sent with the form.

Guidelines

• Use two to five options; do not go over three on narrow screens.
• Keep labels short and of similar length.
• Always keep one option selected; pass defaultValue or value.
• Do not use it for the main navigation of a page.

Content

• Labels are one- or two-word nouns or adjectives.
• label says what is being chosen: “Period”, “View”.

Turkish	English
Günlük	Daily
Haftalık	Weekly
Aylık	Monthly
Liste	List
Izgara	Grid

Glass

Under a Provider material="glass", the track turns glass and the thumb takes the higher-contrast tint. material="solid" keeps it solid.

Related components

• Tabs: A choice that changes panels.
• ToggleGroup: One or more settings stay pressed.
• Toggle: A single on or off setting.