SegmentedControl
SegmentedControl lets users choose one option from a small set of segments.
Source
LLM docs
Package
Examples
8
Properties
51
Playground
Basics
Set
defaultValue to preselect a segment and let the control manage focus and selection state internally.Loading demo…
import { SegmentedControl } from '@plocks/ui';
const frameworks = [
{ label: 'React', value: 'react' },
{ label: 'Angular', value: 'angular' },
{ label: 'Vue', value: 'vue' },
];
export function Demo() {
return (
<SegmentedControl defaultValue="react" data={frameworks} />
);
}Controlled Value
Provide
value and onChange to synchronize the selected segment with external state or companion controls.Loading demo…
import { useState } from 'react';
import { Block, SegmentedControl, Text } from '@plocks/ui';
export function Demo() {
const [value, setValue] = useState('React');
return (
<Block>
<SegmentedControl value={value} onChange={setValue} data={['React', 'Angular', 'Vue']} />
<Text size="xs" c="secondary">
Selected value: {value}
</Text>
</Block>
);
}Sizes
Use the
size prop to match dense toolbars or spacious layouts without changing the underlying data.Loading demo…
import { Block, SegmentedControl, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Block>
{SIZES.map((size) => (
<Block key={size}>
<Text variant="small" c="secondary">{size}</Text>
<SegmentedControl size={size} data={['React', 'Angular', 'Vue']} defaultValue="React" />
</Block>
))}
</Block>
);
}Full Width
Apply
fullWidth to let segments expand and distribute evenly across the available horizontal space.Loading demo…
import { SegmentedControl } from '@plocks/ui';
export function Demo() {
return (
<SegmentedControl fullWidth defaultValue="Preview" data={['Preview', 'Code', 'Export']} />
);
}Orientation
Toggle the
orientation prop to rotate the control vertically for sidebars or keep it horizontal for toolbars.Loading demo…
import { Row, SegmentedControl } from '@plocks/ui';
const data = ['React', 'Angular', 'Vue'];
export function Demo() {
return (
<Row gap="lg" align="flex-start" wrap="wrap">
<SegmentedControl
label="Horizontal (default)"
orientation="horizontal"
defaultValue="React"
data={data}
/>
<SegmentedControl
label="Vertical"
orientation="vertical"
defaultValue="React"
data={data}
/>
</Row>
);
}Custom Colors
Set the
color prop to pull semantic tokens or pass custom values, and enable autoContrast when you need readable labels on vivid fills.Loading demo…
import { Block, SegmentedControl } from '@plocks/ui';
const data = ['React', 'Angular', 'Vue'];
export function Demo() {
return (
<Block>
<SegmentedControl color="primary" defaultValue="React" data={data} />
<SegmentedControl color="success" defaultValue="React" data={data} />
<SegmentedControl color="purple" defaultValue="React" data={data} />
<SegmentedControl color="#FF6B6B" autoContrast defaultValue="React" data={data} />
</Block>
);
}Interaction States
Combine
disabled, readOnly, or per-item disabled flags to signal availability without changing layout or selection rules.Loading demo…
import { Block, SegmentedControl } from '@plocks/ui';
const data = ['React', 'Angular', 'Vue'];
export function Demo() {
return (
<Block>
<SegmentedControl label="Disabled" disabled defaultValue="React" data={data} />
<SegmentedControl label="Read only" readOnly defaultValue="React" data={data} />
<SegmentedControl
label="Single option disabled"
defaultValue="React"
data={['React', 'Angular', { label: 'Vue', value: 'Vue', disabled: true }]}
/>
</Block>
);
}Visual Variants
Choose between
default, filled, outline, or ghost variants and pair them with semantic color tokens to match the surrounding surface.Loading demo…
import { Block, SegmentedControl } from '@plocks/ui';
const data = ['React', 'Angular', 'Vue'];
export function Demo() {
return (
<Block>
<SegmentedControl label="Default" variant="default" defaultValue="React" data={data} />
<SegmentedControl label="Filled" variant="filled" defaultValue="React" data={data} />
<SegmentedControl label="Outline" variant="outline" color="secondary" defaultValue="React" data={data} />
<SegmentedControl label="Ghost" variant="ghost" color="success" defaultValue="React" data={data} />
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources