# nord-segmented-control > Segmented control is used to pick one choice from a set of > closely related choices, and immediately apply that selection. ## 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](/components/radio/) 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`. > **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](/components/checkbox/) or [selectable tag](/components/tag/?example=selectable) instead. - Don’t use for “accepting terms of service” and similar functionality. Use a [checkbox](/components/checkbox/) instead. - When you have more than 5 options to choose from. Consider using a [select](/components/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: > **Do:** User settings > **Don't:** 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): > **Do:** My tasks > **Don't:** My Tasks Avoid ending in punctuation if it’s a single sentence, word, or a fragment: > **Do:** Blue > **Don't:** Blue. Do not use commas or semicolons at the end of each line > **Do:** Patient > **Don't:** 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. ## Examples ### Basic ```html Time frame ``` ### Checked ```html Time frame Time frame Time frame ``` ### Disabled ```html Time frame ``` ### Full Width With Icons ```html View mode ``` ### Full Width ```html Time frame ``` ### Grouped With Stack ```html Time frame Species Add filter ``` ### Icons Only ```html View mode View mode ``` ### Inside Form ```html
Time frame Submit
``` ### Size ```html Time frame Time frame Time frame ``` ### With Icons ```html View mode View mode View mode ``` ### With Label ```html ``` ## API Reference ### Properties - **expand** (`boolean`, default: `false`) — Controls whether the segmented control expands to fill the width of its container. ### Events - **change** (`NordEvent`) — Fired whenever a segmented control item has been checked. ### Slots - **(default)** — Default slot.