segmented-control

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Segmented control purpose and immediate application

Segmented control is used to pick one choice from a linear set of closely related choices, and immediately apply that selection. The primary purpose is to pick a value from a list of options and immediately apply it, similar to radio inputs except radio group selections need explicit save via form submission.

Segmented control number of choices

A segmented control should have 2–5 choices with text labels, or up to 6 icon-only segments. If there are more than 5 choices, use another choice selection pattern such as a group of radio inputs or a dropdown menu.

Segmented control as sort control

A segmented control may be used as a sort control to change how content in a view is rendered. Activating a segment affects the order of a list of items.

Segmented control as filter control

A segmented control may be used as a filter control to change how content in a view is rendered. Activating a segment affects the visibility of items in a list, and there is a segment that shows the full list.

Segmented control as content formatting picker

A segmented control may be used as a content formatting picker to change how content in a view is rendered. Activating a segment changes the formatting of the same content.

Segmented control link rendering limitation

The current implementations of segmented control do not support rendering segments as links (`<a>` tags). Continue to avoid using segmented controls that change the URL until a solution for rendering segments as links is available. If selecting a segment changes the URL, the segments should be rendered as `<a>` tags.

Segmented control icon consistency

Be consistent with the way visual cues are used in each segment. Use either all icons, all text labels, or all text labels with icons. Do not change icons to communicate state.

Segmented control icon-only usage

Use icons without a visible text label sparingly, and only with icons that are easily understood by an average GitHub user. When a segment has an icon without a visible text label, the text label should be shown in a tooltip.

Segmented control label text requirements

Segmented control segment labels should be nouns or noun phrases that succinctly describe the choice. Segment labels may not wrap to multiple lines.

Segmented control must have a label

Segmented controls 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.

Segmented control optional 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.

Segmented control selection behavior

Selections are mutually exclusive. Once a selection has been made, it can only be deselected by making a new selection. A segmented control does not require a Save button to apply the selection. When a choice is selected, the selection immediately affects an object, state, or view.

Segmented control layout: single-column

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

Segmented control layout: two-column

A two-column layout can be used to align the control with adjacent elements, conserve vertical space, and group related controls in a way that is easy to scan.

Segmented control fill available width

A segmented control's width can stretch each button evenly to fill the width of the control's parent. This option is intended to make the segmented control easier to adapt into different layouts.

Give your agent this brain