Segmented control

a compact switch between a few mutually exclusive options, shown as equal-width pills.

Playground

size 
 
 
 
Using it
 
 
  
 Angular  lucent-segmented-control 
import { LucentSegmentedControl } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-segmented-control 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 options input SegmentedOption<T>[] [] { label, value, disabled? } segments. 
 value input, two-way T | null null selected value (two-way). 
 size input xs | sm | md | lg md control density. 
 label input string '' accessible group name. 
  
 
  
Theming
 
 
 
Color (11)
  
 
Size & spacing (14)
  
 
Border & radius (2)
  
 
Shadow (1)
  
 
Type (2)