SegmentedControl

SegmentedControl is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.

Page navigation navigation

Usage

For implicitly saved settings

Use SegmentedControls to pick and immediately apply an option, similar to radio inputs but without needing form submission.

For more information about explicit and automatic save patterns, see the saving pattern guidleines.

The current implementations of our SegmentedControl do not support rendering segments as links (<a> tags). Continue to avoid using SegmentedControls that change the URL until we have a solution for rendering segments as links.

SegmentedControls may also be used to change how content in a view is rendered. The following use cases are an acceptable use for a SegmentedControl:

Sort control: Sort items in a list.
Filter control: Show/hide list items, and there should be a segment that shows the full list.
Content formatting picker: Changes the formatting of the same content.

A screenshot of a GitHub discussions list with the segmented SegmentedControl for sorting highlighted. The sort options are 'Oldest', 'Newest', and 'Top'. — As a sort control

A screenshot of the GitHub organization insights page with the SegmentedControl for filtering highlighted. The options are 'All results' and 'Open security advisories'. — As a filter control

A screenshot of the GitHub billing dashboard with a chart showing costs. The SegmentedControl to switch between the chart type is highlighted. The options are 'Line', 'Area', and 'Bar' — As a content formatting picker

If selecting a segment changes the URL, the segments should be rendered as <a> tags.

See the decision tree for choosing a pattern for tabbed interfaces for more detailed guidance and alternative patterns.

Content

Segments

A SegmentedControl should have 2–5 choices with text labels, or up to 6 icon-only segments. If more are needed, consider another choice selection component such as RadioGroup or ActionMenu.

Don’t

Use a SegmentedControl for selecting from a list of static values. You may use an auxiliary dropdown adjacent to the SegmentedControl.

Don’t

Segment icons

Icons add visual cues. Be consistent (all icons, all text, or icons with text) and don’t change icons to indicate state.

Use icons as a visual cue to communicate what the choice does.

Don’t

Keep the visual cues in each segment consistent.

Don’t

Icon-only segments

Icons without text labels are fine if their meaning is obvious. Include a tooltip for clarity.

Use icons without a visible label when the icon's meaning is obvious.

Don’t

Segment label text

Label segments with nouns or short phrases; avoid multiline labels.

Phrase choice labels as nouns or noun phrases with as few characters as possible.

Don’t

Contextual information

Label

SegmentedControls must have a text label, even if the label is only accessible to screen readers.

A visible label is the most direct way to identify what the control is used for, but the location and surrounding elements of the control often give enough context to visually hide the label.

Caption

An optional caption may be used to provide additional context to help users make a selection or explain what effect the selection will have. Caption text should be as short as possible.

See the layout section for ways to compose a SegmentedControl with a label.

Interaction

Selections are mutually exclusive and apply instantly, without needing a "Save" button. Once a selection has been made, it can only be deselected by making a new selection.

Layout

Composing the control with a label and caption

Single-column

A single-column layout is the same way form controls (for example, TextInputs) are layed out. The single-column layout is useful for preserving horizontal space.