Segmented Control

A single-select component with an animated sliding indicator.

Vertical Orientation

Set the orientation prop to vertical to change the orientation of the component.

Disabled

Use the disabled attr or the disabled class to disable a component.

Read Only

Use the readOnly attr to make the component read-only.

ListBoardCalendar

Compound Version

If you need more control over the children, you can use the compound version of the component.

Controlled

Use the value and onValueChange props when you need to control the value externally.

Uncontrolled

Use the name prop to include the value in the form submission.

Sizes

Use the segmented-control-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Palette

Use the palette-{color} class to control the component color. Refer to the Colors documentation to see all available color and shade options.

For more information on all available color utilities, visit Tailwind .

Customizing

globals.css


:root {
  --ex-segmented-control-cursor: default;
  --ex-segmented-control-font-family: var(--font-sans);
  --ex-segmented-control-font-weight: var(--font-weight-normal);
 
  --ex-segmented-control-radius-sm: var(--radius-sm);
  --ex-segmented-control-radius-md: var(--radius-sm);
  --ex-segmented-control-radius-lg: var(--radius-sm);
 
  --ex-segmented-control-item-font-size-sm: var(--text-xs);
  --ex-segmented-control-item-font-size-md: var(--text-sm);
  --ex-segmented-control-item-font-size-lg: var(--text-base);
 
  --ex-segmented-control-item-height-sm: calc(var(--spacing) * 9);
  --ex-segmented-control-item-height-md: calc(var(--spacing) * 10);
  --ex-segmented-control-item-height-lg: calc(var(--spacing) * 12);
 
  --ex-segmented-control-item-gap-x-sm: calc(var(--spacing) * 1.5);
  --ex-segmented-control-item-gap-x-md: calc(var(--spacing) * 2);
  --ex-segmented-control-item-gap-x-lg: calc(var(--spacing) * 2.5);
 
  --ex-segmented-control-item-px-sm: calc(var(--spacing) * 3.5);
  --ex-segmented-control-item-px-md: calc(var(--spacing) * 4);
  --ex-segmented-control-item-px-lg: calc(var(--spacing) * 5);
 
  --ex-segmented-control-item-radius-sm: var(--radius-sm);
  --ex-segmented-control-item-radius-md: var(--radius-sm);
  --ex-segmented-control-item-radius-lg: var(--radius-sm);
 
  --ex-segmented-control-item-shadow-sm: var(--shadow-sm);
  --ex-segmented-control-item-shadow-md: var(--shadow-sm);
  --ex-segmented-control-item-shadow-lg: var(--shadow-sm);
}

API

Segmented Control

Element	Selector
`SegmentedControl`	`.ex-segmented-control`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultValue`	`string`
`disabled`	`boolean`	`false`
`items`	`Array<string \| { value: string; label: React.ReactNode }>`
`name`	`string`
`orientation`	`enum of ["horizontal", "vertical"]`	`horizontal`
`readOnly`	`boolean`	`false`
`value`	`string`
`onValueChange`	`function`

Segmented Control Item

Element	Selector
`SegmentedControl.Item`	`.ex-segmented-control-item`

Prop	Type	Default
`as`	`ElementType`	`button`
`asChild`	`boolean`	`false`
`value`	`string`

Segmented Control Indicator

Element	Selector
`SegmentedControl.Indicator`	`.ex-segmented-control-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`