Segmented Control

A segmented control is a linear set of options which is used to switch between options or views of similar or related content. Only one segment can be selected at a time

Two components are needed: <qds-web-segmented> that contains the items and <qds-web-segmented-item>.

Overview

Segmented item

Segmented items should be contained in a qds-web-segmented component.

Common usage

When to use

• Use with a limited set of options, usually between 2 to 5*.
• Use a segmented control to provide closely related choices that affect an object, state, or view.
• Use to display the same information in different views (e.g. list view vs card view)
• Make a single selection used in place of a radio button or dropdown

Crucial information necessary for users to succeed.There is an edge

case when segmented control contains more than 5 items. It can be used only on Desktop. For mobile consider using dropdown. :::

When not to use

• Don't use when the set of options is variable or can change dynamically based on user input or system conditions.
• Don't use for navigating between different sections or views of the website. For this purpose consider using tabs.
• Don't use if each segment contain unique content that can not be found in other segment. Use [tabs][] instead
• For binary actions, such as "yes/no" use a switch instead of a segmented button.

Segmented control vs. tabs

Tapping a tab reveal new content. Usually, content within one tab doesn't live inside another.

Tapping a segmented control will filter a smaller content segment in the current view or change its presentation. Content in one segment is likely to exist in another.

Properties

The following properties are indeed needed for the qds-web-segmented-item.

qds-web-segmented need a single property segmentedDescription

used to add a descriptive label to the whole group. :::

Selected

Whether or not the segmented item is selected.

Loading...

Live Editor

<qds-web-segmented segmented-description="States example">
  <qds-web-segmented-item
    importance="emphasized"
    text="Selected"
    selected
  ></qds-web-segmented-item>
  <qds-web-segmented-item
    importance="standard"
    text="Default"
  ></qds-web-segmented-item>
  <qds-web-segmented-item
    importance="standard"
    text="Disabled"
    disabled
  ></qds-web-segmented-item>
</qds-web-segmented>

Disabled

Use the disabled attribute to disable a segment item. Clicks will be suppressed until the disabled state is removed.

Text

The text property sets the label displayed in the button.

Loading...

Live Editor

<qds-web-segmented segmented-description="Graphic views of progress and status">
  <qds-web-segmented-item text="List view" selected></qds-web-segmented-item>
  <qds-web-segmented-item text="Dashboard view"></qds-web-segmented-item>
</qds-web-segmented>

Icon

Use the icon-name property to display an icon on the segment. Quartz will look into the default icon library unless you specify another library using the icon-library property.

See the Usage > Icons instructions for more details.

Loading...

Live Editor

<qds-web-segmented segmented-description="Graphic views of progress and status">
  <qds-web-segmented-item
    text="List view"
    icon-name="list-bullets"
    selected
  ></qds-web-segmented-item>
  <qds-web-segmented-item
    text="Dashboard view"
    icon-name="squares-checked"
  ></qds-web-segmented-item>
</qds-web-segmented>

Setting an icon-only to true will make the button show only an icon and the text on a tooltip.

Loading...

Live Editor

<qds-web-segmented segmented-description="Graphic views of progress and status">
  <qds-web-segmented-item
    text="List view"
    icon-name="list-bullets"
    icon-only="true"
    selected
  ></qds-web-segmented-item>
  <qds-web-segmented-item
    text="Dashboard view"
    icon-name="squares-checked"
    icon-only="true"
  ></qds-web-segmented-item>
</qds-web-segmented>

Size

Segmented items follow the transversal control size principles.

The size of the segmented control depends on the layout and hierarchical level. Make sure segmented buttons have adequate margins from the edge of the viewport or frame.

There are 3 height sizes for the segmented control: small, standard, and large. Choose a size that best fits your layout's density.

Loading...

Live Editor

<div class="qds-controls qds-related">
  <div class="qds-controls qds-related flex flex-row">
    <qds-label inline text="Standard size:"></qds-label>
    <qds-web-segmented segmented-description="States and size example">
      <qds-web-segmented-item
        importance="emphasized"
        text="Selected"
        selected
      ></qds-web-segmented-item>
      <qds-web-segmented-item
        importance="standard"
        text="Default"
      ></qds-web-segmented-item>
      <qds-web-segmented-item
        importance="standard"
        text="Disabled"
        disabled
      ></qds-web-segmented-item>
    </qds-web-segmented>
  </div>
  <div class="qds-controls qds-related flex flex-row">
    <qds-label inline size="large" text="Large size:"></qds-label>
    <qds-web-segmented segmented-description="States and size example">
      <qds-web-segmented-item
        importance="emphasized"
        text="Selected"
        size="large"
        selected
      ></qds-web-segmented-item>
      <qds-web-segmented-item
        importance="standard"
        text="Default"
        size="large"
      ></qds-web-segmented-item>
      <qds-web-segmented-item
        importance="standard"
        text="Disabled"
        size="large"
        disabled
      ></qds-web-segmented-item>
    </qds-web-segmented>
  </div>
  <div class="qds-controls-small qds-related flex flex-row">
    <qds-label inline size="small" text="Small size:"></qds-label>
    <qds-web-segmented segmented-description="States and size example">
      <qds-web-segmented-item
        importance="emphasized"
        text="Selected"
        size="small"
        selected
      ></qds-web-segmented-item>
      <qds-web-segmented-item
        importance="standard"
        text="Default"
        size="small"
      ></qds-web-segmented-item>
      <qds-web-segmented-item
        importance="standard"
        text="Disabled"
        size="small"
        disabled
      ></qds-web-segmented-item>
    </qds-web-segmented>
  </div>
</div>

General guidance

• Avoid crowding the segments with too many options.
• Use clear and short phrases for segment labels. Preferably use nouns or nous phrases for labels.
• Pay attention to the width of the segmented control. Don't allow segment to wrap to a new line.
• If icons are used without a label they must clearly communicate their meaning.
• Be consistent with the way visual cues are used in each segment.
• All icons should be of the same style (filled or outline)

Content

• As much as possible, use content with a similar size in each segment. Avoid mixing long copy and short copy.
• Text in segmented control should never wrap or truncate. Consider using dropdown or radio button instead.
• If control fit into the layout width on Desktop, but doesn't fit on Tablet and/or Mobile, replace it with dropdown or consider using another control.
• If there are 5+ segments that don't fit into the layout width consider using another control.

Importing

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

Import

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsWebSegmented } from 'https://cdn.jsdelivr.net/npm/@quartzds/websites@next+esm'
defineCustomElementQdsWebSegmented()

Bundler

To import this component using a bundler:

import { defineCustomElementQdsWebSegmented } from '@quartzds/websites'
defineCustomElementQdsWebSegmented()

Angular

To import this component as an Angular component:

import { QdsWebSegmented } from '@quartzds/websites-angular'

React

To import this component as a React component:

import { QdsWebSegmented } from '@quartzds/websites-react'

Vue

To import this component as a Vue component:

import { QdsWebSegmented } from '@quartzds/websites-vue'

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

Import

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsWebSegmentedItem } from 'https://cdn.jsdelivr.net/npm/@quartzds/websites@next+esm'
defineCustomElementQdsWebSegmentedItem()

Bundler

To import this component using a bundler:

import { defineCustomElementQdsWebSegmentedItem } from '@quartzds/websites'
defineCustomElementQdsWebSegmentedItem()

Angular

To import this component as an Angular component:

import { QdsWebSegmentedItem } from '@quartzds/websites-angular'

React

To import this component as a React component:

import { QdsWebSegmentedItem } from '@quartzds/websites-react'

Vue

To import this component as a Vue component:

import { QdsWebSegmentedItem } from '@quartzds/websites-vue'

Platforms

Segmented control component is designed two platforms mobile / desktop

Mobile view

Segments should not wrap to the new line. If there are too many segments that don't fit into the screen width the dropdown menu appears that allows to switch between segments.

Segmented control might not be needed on Mobile due to layout change. e.g. Switch between product view is not needed on Mobile

Anatomy

Component reference

qds-web-segmented

Attribute / PropertyTypeDescriptionDefault

segmented-description / segmentedDescription

string

undefined

qds-web-segmented-item

Attribute / PropertyTypeDescriptionDefault

disabled

boolean | undefined

Prevents the segmented item from being interacted with: it cannot be selected or focused.

false

icon-library / iconLibrary

string | undefined

The name of a registered icon library.

"default"

icon-name / iconName

string | undefined

The name of the icon to render.

Available names depend on the icon library being used.

undefined

icon-only / iconOnly

boolean | undefined

The segmented-item's only shows an icon.

false

selected

boolean | undefined

Whether or not the segmented item is selected.

false

size

"large" | "small" | "standard" | undefined

The segmented-item's size.

"standard"

text

string

The segmented-item's text.

undefined