Segmented Control ItemDraft

Segmented control items populate a segmented control with options. Every item should be placed inside a segmented control.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-stack>
  <nord-segmented-control-item label="Active" name="group" value="active" checked></nord-segmented-control-item>
  <nord-segmented-control-item label="Default" name="group" value="default"></nord-segmented-control-item>
</nord-stack>

Properties

PropertyAttributeDescriptionTypeDefault
checkedchecked

Controls whether the segmented control item is checked or not.

booleanfalse
sizesize

The size of the segmented control item. This affects font-size and padding.

"s" | "m" | "l""m"
labellabel

Label for the segmented control item.

string""
disableddisabled

Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.

booleanfalse
namename

The name of the form component.

string | undefinedundefined
valuevalue

The value of the form component.

string""
formform

Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.

HTMLFormElement | nullundefined

Events

EventDescriptionType
change

Fired whenever the input's value is changed via user interaction.

NordEvent
input

Fired as the user types into the input.

NordEvent

Slots

Slot nameDescription
label

Use when a label requires more than plain text.

Methods

Method nameParametersDescription
focus(options?: FocusOptions) => voidoptions: An object which controls aspects of the focusing process.

Programmatically move focus to the component.

blur() => voidN/A

Programmatically remove focus from the component.

click() => voidN/A

Programmatically simulates a click on the component.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--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

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 name attribute. Therefore, it is crucial that the same name is used for a group of segmented control items.
  • Give each segmented control item within a group a unique value.
  • Segmented control items must be used in combination with a segmented control component.

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:

User settings
Option 1

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):

My tasks
My Tasks

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

Blue
Blue.

Do not use commas or semicolons at the end of each line

Patient
Patient;

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. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.