---
title: "Segmented control"
description: "SegmentedControl may be used to group multiple selections. The controls display the current state and related state."
sidebar_label: "Segmented control"
slug: /reference/components/segmented-control
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Segmented control

SegmentedControl may be used to group multiple selections. The controls display the current state and related state. Create layout to convey a clear sense of information hierarchy. When a control is engaged, information below the control should also be updated. Also known as 'Toggle group'.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `SegmentedControlProps`  
**Story source:** [`demo/stories/Segmentedcontrol.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Segmentedcontrol.stories.tsx)

## Live demo

<ComponentDemo name="Segmented control" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `items` | `array` | Yes |  |
| `onChange` | `reflection` | Yes |  |
| `badges` | `array` |  |  |
| `maxItems` | `number` |  |  |
| `selectedIndex` | `number` |  |  |
| `size` | `union` |  |  |