Segmented Control

A 40px track of two or three segments where exactly one is chosen, under an optional field header. The chosen segment is a white skeuomorphic face; segments show a glyph, a label, or both.

Folder

This is a hint text to help user.

Showing Home

import { SegmentedControl } from '@orvain/react';
 
<SegmentedControl
  size="sm"
  value={view}
  onValueChange={setView}
  items={[
    { value: 'day', label: 'Day' },
    { value: 'week', label: 'Week' },
    { value: 'month', label: 'Month' },
  ]}
/>
 
// Icon-only items need an aria-label
<SegmentedControl
  items={[
    { value: 'list', icon: <ListIcon />, 'aria-label': 'List view' },
    { value: 'grid', icon: <GridIcon />, 'aria-label': 'Grid view' },
  ]}
/>

Add an icon-only Orvain Segmented Control under the header “Field Title”, required, with the hint “This is a hint text to help user.”; 3 segments: Home (selected), Shared and Archive.

Orvain MCPIncluded with the library

When to use#

To switch between two or three views of the same content: list and grid, day and week.
For a setting whose options are short and read best side by side.

When not to use

Use a Radio group for options that need descriptions.
Use a Tab Menu for sections with their own content and more than a few labels.

Anatomy#

1Header

The field label, a red * and a hint line, 6px above the track.

2Track

300 wide, 40 tall, 4px in and apart, radius 12, a 4% wash.

3Segment

32 tall, radius 8, sharing the width equally: a 28px glyph, a Satoshi Bold 12 label, or both.

4Chosen segment

White with a 1px #f2f2f2 ring and a soft layered drop.

5Items

A lighter 132px item on its own: radius 6, Medium 14, a 1px stroke and a 2px drop when chosen.

States#

Type

Icon, Label, or Icon + Label.

Chosen

The white face, text #2a2a2a.

Hover

The text darkens; Items take a white wash.

Disabled

Text #cbcbcb; the chosen face keeps its colour and loses its lift.

Source#

Preview – final code pending

The Segmented Control is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

button groups