Usage
A segmented control presents a small set of mutually exclusive options side by side, like a compact radio group. The Segmented Control is the container; each option is a Segmented Control Item.
Import the parts you need — each import registers its custom element:
import "@nordhealth/components/lib/SegmentedControl"
import "@nordhealth/components/lib/SegmentedControlItem"
Then list the options, sharing a name so they form one group:
Composition
A segmented control wraps a set of items that share a name, so only one can be selected at a time.
SegmentedControl
├── SegmentedControlItem
├── SegmentedControlItem
└── SegmentedControlItem
<nord-segmented-control aria-label="Date range">
<nord-segmented-control-item label="Day" name="range" value="day" checked></nord-segmented-control-item>
<nord-segmented-control-item label="Week" name="range" value="week"></nord-segmented-control-item>
</nord-segmented-control>
Segmented Control
Segmented Control is the container. Give it an accessible name with aria-label or aria-labelledby, and use expand to stretch the items to fill the available width.
Segmented Control Item
Segmented Control Item is a single option. Set its label, value, and a shared name; mark the active one with checked.
Examples
Expanded
Use expand so the items share the full width of the container.
With label
Give the control a visible label to describe the choice it represents.
With icons
Pair each item's label with an icon to reinforce its meaning.
Icons only
Use icons without text labels for compact, space-saving options.
Full width with icons
Combine expand with icons so icon-and-label items share the full width.
Grouped with stack
Place a segmented control inside a stack to space it alongside other controls.
Inside a form
The selected item submits with the shared name, so the control works inside a form.
Size
Set the size attribute to adjust the control's scale.
Checked
Mark the active option with checked to set the initial selection.
Disabled
Set disabled on an item to prevent it from being selected.
RTL
The segmented control follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Give the Segmented Control an accessible name (
aria-labeloraria-labelledby) so the group's purpose is clear. - Items share a
nameand behave like a radio group: arrow keys move between options and only one can be selected. - Use a segmented control for a few (typically 2–4) short, mutually exclusive options. For longer lists, use a Select instead.
API reference
SegmentedControl
Segmented control is used to pick one choice from a set of closely related choices, and immediately apply that selection.
<nord-accordion></nord-accordion>Props
| 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. |
Parts
This component is made up of the following parts.
Segmented Control Item
Segmented control items populate a segmented control with options. Every item should be placed inside a segmented control.
<nord-accordion-header></nord-accordion-header>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
checked | checked | Controls whether the segmented control item is checked or not. | boolean | false |
size | size | The size of the segmented control item. This affects font-size and padding. | 's' | 'm' | 'l' | 'm' |
label | label | Label for the segmented control item. | string | '' |
disabled | disabled | Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. | boolean | false |
name | name | The name of the form component. | string | undefined | — |
value | value | The value of the form component. | string | '' |
form | form | Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form. | HTMLFormElement | null | — |
Slots
| Slot name | Description |
|---|---|
label | Use when a label requires more than plain text. |
Methods
| Method name | Parameters | Description |
|---|---|---|
focus(options?: FocusOptions) => void | options: An object which controls aspects of the focusing process. | Programmatically move focus to the component. |
blur() => void | N/A | Programmatically remove focus from the component. |
click() => void | N/A | Programmatically simulates a click on the component. |
| Event | Detail Type | Description |
|---|---|---|
change | NordEvent | Fired whenever the segmented control item has been checked. |
input | NordEvent | Fired as the user types into the input. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-segmented-control-item-border-radius | Controls the rounded corners of the item, using border radius tokens. | var(--n-border-radius-s) |
--n-segmented-control-item-gap | Controls the spacing between elements within the item, using our spacing tokens. | var(--n-space-xs) |
--n-segmented-control-item-gradient | Controls the overlayed gradient background on the item. | linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%)) |
--n-segmented-control-item-background-color | Controls the background color of the item, using our color tokens. | var(--n-color-nav-hover) |
--n-segmented-control-item-color | Controls the color of the text within the item, using our color tokens. | var(--n-color-text-weaker) |
--n-segmented-control-item-padding-inline | Controls the inline, or left and right, padding of the item. | calc(var(--n-space-m) / 1.2) |
--n-segmented-control-item-box-shadow | Controls the surrounding shadow, using our box shadow tokens. | none |
--n-segmented-control-item-font-size | Controls the size of the text within the item, using our font tokens. | var(--n-font-size-m) |
--n-segmented-control-item-font-weight | Controls the weight of the text within the item, using our font tokens. | var(--n-font-weight) |
--n-segmented-control-item-min-block-size | Controls the minimum block size, or height, of the item using our spacing tokens. | calc(var(--n-space-xl) - 2px) |
--n-segmented-control-item-inline-size | Controls the inline size of the item. | auto |
Design guidelinesFor designers
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.