# ion-segment
URL: https://ionicframework.com/docs/api/segment
**Encapsulation**: [shadow](/docs/reference/glossary.md#shadow)
Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.
Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
## Basic Usage
Segments consist of [segment buttons](/docs/api/segment-button.md) with a `value` property on each button. Set the `value` property on the segment to match the value of a button to select that button. Segments can also be disabled to prevent users from interacting with them.
**JavaScript**
```html
Default
Segment
Disabled
Segment
```
**Angular**
`src/app/example.component.html`
```html
Default
Segment
Disabled
Segment
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonLabel, IonSegment, IonSegmentButton],
})
export class ExampleComponent {}
```
**React**
```tsx
import React from 'react';
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
function Example() {
return (
<>
Default
Segment
Disabled
Segment
);
}
export default Example;
```
**Vue**
```html
Default
Segment
Disabled
Segment
```
## Scrollable Segments
Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.
**JavaScript**
`index.html`
```html
```
`index.ts`
```ts
import { defineCustomElements } from '@ionic/core/loader';
import { addIcons } from 'ionicons';
import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons';
/* Core CSS required for Ionic components to work properly */
import '@ionic/core/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/core/css/normalize.css';
import '@ionic/core/css/structure.css';
import '@ionic/core/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/core/css/padding.css';
import '@ionic/core/css/float-elements.css';
import '@ionic/core/css/text-alignment.css';
import '@ionic/core/css/text-transformation.css';
import '@ionic/core/css/flex-utils.css';
import '@ionic/core/css/display.css';
/**
* Ionic Dark Palette
* -----------------------------------------------------
* For more information, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/
// import '@ionic/core/css/palettes/dark.always.css';
// import '@ionic/core/css/palettes/dark.class.css';
import '@ionic/core/css/palettes/dark.system.css';
/* Theme variables */
import './theme/variables.css';
/**
* On Ionicons 7.2+ these icons
* get mapped to a kebab-case key.
* Alternatively, developers can do:
* addIcons({ 'barbell': barbell, 'basket': basket, 'call': call, 'globe': globe,
* 'heart': heart, 'home': home, 'person': person, 'pin': pin, 'star': star, 'trash': trash });
*/
addIcons({ barbell, basket, call, globe, heart, home, person, pin, star, trash });
defineCustomElements();
```
**Angular**
`src/app/example.component.html`
```html
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/angular';
import { addIcons } from 'ionicons';
import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonIcon, IonSegment, IonSegmentButton],
})
export class ExampleComponent {
constructor() {
/**
* Any icons you want to use in your application
* can be registered in app.component.ts and then
* referenced by name anywhere in your application.
*/
addIcons({ barbell, basket, call, globe, heart, home, person, pin, star, trash });
}
}
```
**React**
```tsx
import React from 'react';
import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/react';
import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
function Example() {
return (
);
}
export default Example;
```
**Vue**
```html
```
## Segments in Toolbars
**JavaScript**
```html
All
Favorites
```
**Angular**
`src/app/example.component.html`
```html
All
Favorites
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
})
export class ExampleComponent {}
```
**React**
```tsx
import React from 'react';
import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
function Example() {
return (
All
Favorites
);
}
export default Example;
```
**Vue**
```html
All
Favorites
```
## Swipeable Segments
Each [segment button](/docs/api/segment-button.md) can be associated with a [segment content](/docs/api/segment-content.md) element that will be displayed when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated to reflect the currently visible content.
**Warning**
If no initial `value` is assigned to the `ion-segment` when using swipeable segments, the segment will default to the value of the first segment button. Segment buttons cannot be disabled when used with swipeable segments.
**JavaScript**
```html
First
Second
Third
First
Second
Third
```
**Angular**
`src/app/example.component.html`
```html
First
Second
Third
First
Second
Third
```
`src/app/example.component.css`
```css
ion-segment-view {
height: 150px;
}
ion-segment-content {
display: flex;
align-items: center;
justify-content: center;
}
ion-segment-content:nth-of-type(1) {
background: lightpink;
}
ion-segment-content:nth-of-type(2) {
background: lightblue;
}
ion-segment-content:nth-of-type(3) {
background: lightgreen;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView],
})
export class ExampleComponent {}
```
**React**
`src/main.css`
```css
ion-segment-view {
height: 150px;
}
ion-segment-content {
display: flex;
align-items: center;
justify-content: center;
}
ion-segment-content:nth-of-type(1) {
background: lightpink;
}
ion-segment-content:nth-of-type(2) {
background: lightblue;
}
ion-segment-content:nth-of-type(3) {
background: lightgreen;
}
```
`src/main.tsx`
```tsx
import React from 'react';
import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
First
Second
Third
First
Second
Third
);
}
export default Example;
```
**Vue**
```html
First
Second
Third
First
Second
Third
```
## Theming
### Colors
**JavaScript**
```html
Default
Segment
Primary
Segment
Secondary
Segment
Tertiary
Segment
Success
Segment
Warning
Segment
Danger
Segment
Light
Segment
Medium
Segment
Dark
Segment
```
**Angular**
`src/app/example.component.html`
```html
Default
Segment
Primary
Segment
Secondary
Segment
Tertiary
Segment
Success
Segment
Warning
Segment
Danger
Segment
Light
Segment
Medium
Segment
Dark
Segment
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonLabel, IonSegment, IonSegmentButton],
})
export class ExampleComponent {}
```
**React**
```tsx
import React from 'react';
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
function Example() {
return (
<>
Default
Segment
Primary
Segment
Secondary
Segment
Tertiary
Segment
Success
Segment
Warning
Segment
Danger
Segment
Light
Segment
Medium
Segment
Dark
Segment
);
}
export default Example;
```
**Vue**
```html
Default
Segment
Primary
Segment
Secondary
Segment
Tertiary
Segment
Success
Segment
Warning
Segment
Danger
Segment
Light
Segment
Medium
Segment
Dark
Segment
```
### CSS Custom Properties
**JavaScript**
```html
Custom
Segment
```
**Angular**
`src/app/example.component.html`
```html
Custom
Segment
```
`src/app/example.component.css`
```css
ion-segment {
--background: #54dc98;
}
```
`src/app/example.component.ts`
```ts
import { Component } from '@angular/core';
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonLabel, IonSegment, IonSegmentButton],
})
export class ExampleComponent {}
```
**React**
`src/main.css`
```css
ion-segment {
--background: #54dc98;
}
```
`src/main.tsx`
```tsx
import React from 'react';
import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
import './main.css';
function Example() {
return (
<>
Custom
Segment
);
}
export default Example;
```
**Vue**
```html
Custom
Segment
```
## Accessibility
### Keyboard Interactions
The component has full keyboard support for navigating between and selecting `ion-segment-button` elements. By default, keyboard navigation will only focus `ion-segment-button` elements, but you can use the `selectOnFocus` property to ensure that they get selected on focus as well. The following table details what each key does:
| Key | Description |
| --- | --- |
| ArrowRight | Focuses the next focusable element. |
| ArrowLeft | Focuses the previous focusable element. |
| Home | Focuses the first focusable element. |
| End | Focuses the last focusable element. |
| Space or Enter | Selects the element that is currently focused. |
## Interfaces
### SegmentChangeEventDetail
```typescript
interface SegmentChangeEventDetail {
value?: string;
}
```
### SegmentCustomEvent
While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
```typescript
interface SegmentCustomEvent extends CustomEvent {
target: HTMLIonSegmentElement;
detail: SegmentChangeEventDetail;
}
```
## Properties
### color
**Description**: The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics.md).
**Attribute**: `color`
**Type**: `"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined`
**Default**: `undefined`
### disabled
**Description**: If `true`, the user cannot interact with the segment.
**Attribute**: `disabled`
**Type**: `boolean`
**Default**: `false`
### mode
**Description**: The mode determines which platform styles to use. This is a [virtual property](/docs/core-concepts/fundamentals.md#virtual-properties) that is set once during initialization and will not update if you change its value after the initial render.
**Attribute**: `mode`
**Type**: `"ios" | "md"`
**Default**: `undefined`
### scrollable
**Description**: If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
**Attribute**: `scrollable`
**Type**: `boolean`
**Default**: `false`
### selectOnFocus
**Description**: If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
**Attribute**: `select-on-focus`
**Type**: `boolean`
**Default**: `false`
### swipeGesture
**Description**: If `true`, users will be able to swipe between segment buttons to activate them.
**Attribute**: `swipe-gesture`
**Type**: `boolean`
**Default**: `true`
### value
**Description**: the value of the segment.
**Attribute**: `value`
**Type**: `number | string | undefined`
**Default**: `undefined`
## Events
| Name | Description | Bubbles |
| --- | --- | --- |
| `ionChange` | Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`. This event will not emit when programmatically setting the `value` property. | `true` |
## Methods
No public methods available for this component.
## CSS Shadow Parts
No CSS shadow parts available for this component.
## CSS Custom Properties
**iOS**
| Name | Description |
| --- | --- |
| `--background` | Background of the segment button |
**MD**
| Name | Description |
| --- | --- |
| `--background` | Background of the segment button |
## Slots
| Name | Description |
| --- | --- |
| | The default slot |