SegmentedControl
Segmented control is used to pick one choice from a set of closely related choices, and immediately apply that selection.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
expand | expand | Controls whether the segmented control expands to fill the width of its container. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | Default slot. |
| Event | Detail Type | Description |
|---|---|---|
change | NordEvent | Fired whenever a segmented control item has been checked. |
This component has no CSS custom properties.
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use segmented control to allow users to pick one choice from a set of closely related choices, and immediately apply that selection.
- Favor segmented control or radio component over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.
- Segmented control items are grouped by their
nameattribute. Therefore, it is crucial that the samenameis used for a group of segmented control items. - Give each segmented control item within a group a unique
value.
Don’t
- Don’t place interactive content (buttons, links etc) inside the label.
- Don’t use when a user can select more than one option. In this case, use a checkbox or selectable tag instead.
- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.
- When you have more than 5 options to choose from. Consider using a select instead.
Content guidelines
Segmented control labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:
When writing segmented control labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid ending in punctuation if it’s a single sentence, word, or a fragment:
Do not use commas or semicolons at the end of each line
Additional considerations
- Once a segmented control item has been selected, users cannot return to having no items selected without refreshing their browser window. Therefore, you should always make sure one of the items is pre-selected.
Integration
For integration guidelines, please see Web Components documentation .