Components

SegmentedControl

A single choice among two to five views of the same content, with a sliding thumb.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { SegmentedControl } from '@bigbang/ui';
Source: SegmentedControl.tsx
Storybook: SegmentedControl · Playground

SegmentedControl is in the @bigbang/ui package. The option type is exported as SegmentedControlItem.

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

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

<SegmentedControl label="Period" items={items} value={period} onValueChange={setPeriod} />;

Props

labelRequired

Description: Name of the group for screen readers, such as "Görünüm". Required: the options alone do not say what they choose.
Type: string

itemsRequired

Description: Two to five mutually exclusive options.
Type: readonly SegmentedControlItem[]

value

Description: Selected value when you control it. Use it with onValueChange.
Type: string

defaultValue

Description: Value selected on first render when you do not control it.
Type: string

onValueChange

Description: Called with the newly selected value.
Type: (value: string) => void

size

Description: Item height: 32 or 36 px.
Type: 'sm' | 'md'
Default: 'md'

fullWidth

Description: Stretches the control to its container and shares the width equally between the options.
Type: boolean
Default: false

disabled

Description: Turns off every option.
Type: boolean
Default: false

name

Description: Field name used when the control is inside a form.
Type: string

material

Description: 'solid' keeps the track solid under a glass Provider.
Type: 'auto' | 'solid'
Default: 'auto'

className

Description: For layout only: margins and placement.
Type: string

SegmentedControlItem: value, label, optional icon and disabled.

Data attributes

data-component="segmented-control": on the root.
data-part="thumb" and data-ready once placed: on the sliding pill.
data-checked, data-unchecked, data-disabled: on options (Base UI).