Segmented Control

import {SegmentedControlModule} from "@qualcomm-ui/angular/segmented-control"

Usage

The SegmentedControl component allows users to make a selection from multiple options, exclusive (similar to radio buttons) or not (similar to checkboxes). It is typically used for filtering content, sorting elements or switching between views within the same context.

Examples

Simple

Use the simple API to create segmented control items using minimal markup.

Brand

ChartTableMap

<fieldset q-segmented-control [defaultValue]="['chart']">
  <label q-segmented-control-item text="Chart" value="chart"></label>
  <label q-segmented-control-item text="Table" value="table"></label>
  <label q-segmented-control-item text="Map" value="map"></label>
</fieldset>

Composite

Build with the composite API for granular control. This API requires you to provide each subcomponent, but gives you full control over the structure and layout.

Brand

ChartTableMap

<fieldset q-segmented-control [defaultValue]="['chart']">
  <label q-segmented-control-item-root value="chart">
    <span q-segmented-control-item-text>Chart</span>
    <input q-segmented-control-hidden-input />
  </label>
  <label q-segmented-control-item-root value="table">
    <span q-segmented-control-item-text>Table</span>
    <input q-segmented-control-hidden-input />
  </label>
  <label q-segmented-control-item-root value="map">
    <span q-segmented-control-item-text>Map</span>
    <input q-segmented-control-hidden-input />
  </label>
</fieldset>

Multiple

By default, a segmented control allows for a single selection. Set multiple to create a segmented control that allows for multiple selections.

Brand

ProductionStagingDevelopmentQA

<fieldset multiple q-segmented-control>
  <label q-segmented-control-item text="Production" value="prod"></label>
  <label q-segmented-control-item text="Staging" value="stag"></label>
  <label q-segmented-control-item text="Development" value="dev"></label>
  <label q-segmented-control-item text="QA" value="qa"></label>
</fieldset>

Orientation

Use orientation to control the layout direction of the SegmentedControl. Options include:

horizontal: Items are laid out in a row (default).
vertical: Items are laid out in a column.

Brand

ChartTableMap

<fieldset
  orientation="vertical"
  q-segmented-control
  [defaultValue]="['chart']"
>
  <label q-segmented-control-item text="Chart" value="chart"></label>
  <label q-segmented-control-item text="Table" value="table"></label>
  <label q-segmented-control-item text="Map" value="map"></label>
</fieldset>

Icon

Use icon on your q-segmented-control-item element to add icons to the segmented control items.

Brand

ChartTableMap

<fieldset q-segmented-control [defaultValue]="['chart']">
  <label
    icon="ChartArea"
    q-segmented-control-item
    text="Chart"
    value="chart"
  ></label>
  <label
    icon="Table"
    q-segmented-control-item
    text="Table"
    value="table"
  ></label>
  <label icon="Map" q-segmented-control-item text="Map" value="map"></label>
</fieldset>

Layout

Use layout to specify how the segmented control is sized and aligned within its container. Options include:

hug: Content-sized; width matches the items only (default).
fill: Full width; items share space evenly.

Brand

@for (layout of layouts; track layout) {
  <fieldset
    q-segmented-control
    [defaultValue]="['chart']"
    [layout]="layout"
  >
    <label q-segmented-control-item text="Chart" value="chart"></label>
    <label q-segmented-control-item text="Table" value="table"></label>
    <label q-segmented-control-item text="Map" value="map"></label>
  </fieldset>
}

Size

Use size to control the size of the segmented control. The available sizes are sm, md (default), and lg.

Brand

@for (size of sizes; track size) {
  <fieldset q-segmented-control [defaultValue]="['chart']" [size]="size">
    <label q-segmented-control-item text="Chart" value="chart"></label>
    <label q-segmented-control-item text="Table" value="table"></label>
    <label q-segmented-control-item text="Map" value="map"></label>
  </fieldset>
}

Variant

Use variant to control the visual style of the segmented control. The available variants are primary (default) and neutral.

Brand

@for (variant of variants; track variant) {
  <fieldset
    q-segmented-control
    [defaultValue]="['chart']"
    [variant]="variant"
  >
    <label q-segmented-control-item text="Chart" value="chart"></label>
    <label q-segmented-control-item text="Table" value="table"></label>
    <label q-segmented-control-item text="Map" value="map"></label>
  </fieldset>
}

Disabled

Use disabled on your q-segmented-control element to set the disabled state of the entire control. Use disabled on your q-segmented-control-item elements to set the disabled state of individual items.

Brand

ChartTableMap

<fieldset disabled q-segmented-control>
  <label q-segmented-control-item text="Chart" value="chart"></label>
  <label q-segmented-control-item text="Table" value="table"></label>
  <label q-segmented-control-item text="Map" value="map"></label>
</fieldset>

Controlled state

Use value to control the selected value of the segmented control. This allows for more complex interactions and integration with form libraries.

Brand

ProductionStagingDevelopmentQA

<fieldset
  multiple
  q-segmented-control
  [value]="value()"
  (valueChanged)="valueChanged($event)"
>
  <label q-segmented-control-item text="Production" value="prod"></label>
  <label q-segmented-control-item text="Staging" value="staging"></label>
  <label q-segmented-control-item text="Development" value="dev"></label>
  <label q-segmented-control-item text="QA" value="qa"></label>
</fieldset>

Accessibility

Users can navigate the segmented control using the keyboard. The following keys are supported:

Tab/Shift + Tab: Move focus between items.
Space/Enter: Select the focused item. Unselects an already selected item if multiple is set.

Icon only

While it is possible to use icon-only items in the segmented control, it is important to ensure that they are easily understood and accessible. Pick meaningful icons and use the aria-label attribute to describe their purpose.

Brand

<fieldset q-segmented-control [defaultValue]="['chart']">
  <label
    aria-label="Chart view"
    icon="ChartArea"
    q-segmented-control-item
    value="chart"
  ></label>
  <label
    aria-label="Table view"
    icon="Table"
    q-segmented-control-item
    value="table"
  ></label>
  <label
    aria-label="Map view"
    icon="Map"
    q-segmented-control-item
    value="map"
  ></label>
</fieldset>

API

q-segmented-control

Prop	Type	Default
defaultValue The initial value of the group when rendered. Use when you don't need to control the value of the group.	string[]
dir The document's text/writing direction.	'ltr' \| 'rtl'
disabled Whether the group is disabled. When true, prevents user interaction and applies visual styling to indicate the disabled state..	boolean
id HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
layout The style variant of the segmented control.	'hug' \| 'fill'
multiple Whether the control allows multiple selections or not.	boolean
name The name of the input field(s).	string	the control's id
orientation Orientation of the segmented control group	\| 'horizontal' \| 'vertical'	'horizontal'
size Governs the width and height of the segmented control as well as the font size of its content.	\| 'sm' \| 'md' \| 'lg'
value The controlled value of the group.	string[]
variant The style variant of the segmented control.	\| 'primary' \| 'neutral'
(valueChanged) Function called once the value of the segmented control group changes.	string[]

defaultValue

Type

string[]

Description

The initial value of the group when rendered. Use when you don't need to control the value of the group.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Whether the group is disabled. When true, prevents user interaction and applies visual styling to indicate the disabled state..

Type

string

Description

HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)

layout

Type

'hug' | 'fill'

Description

The style variant of the segmented control.

multiple

Type

boolean

Description

Whether the control allows multiple selections or not.

name

Type

string

Description

The name of the input field(s).

orientation

Type

| 'horizontal'
| 'vertical'

Description

Orientation of the segmented control group

size

Type

| 'sm'
| 'md'
| 'lg'

Description

Governs the width and height of the segmented control as well as the font size of its content.

value

Type

string[]

Description

The controlled value of the group.

variant

Type

| 'primary'
| 'neutral'

Description

The style variant of the segmented control.

(valueChanged)

Type

string[]

Description

Function called once the value of the segmented control group changes.

Attribute / Property	Value
`class`	'qui-segmented-control__root'
`data-disabled`
`data-layout`	'hug' \| 'fill'
`data-orientation`	\| 'horizontal' \| 'vertical'
`data-part`	'group'
`data-scope`	'segmented-control'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-variant`	\| 'primary' \| 'neutral'

class

Value

'qui-segmented-control__root'

data-disabled

Value

data-layout

Value

'hug' | 'fill'

data-orientation

Value

| 'horizontal'
| 'vertical'

data-part

Value

'group'

data-scope

Value

'segmented-control'

data-size

Value

| 'sm'
| 'md'
| 'lg'

data-variant

Value

| 'primary'
| 'neutral'

q-segmented-control-item

The q-segmented-control-item component extends the q-segmented-control-item-root directive with the following attributes:

Prop	Type
icon	\| string \| LucideIconData
text	string

icon

Type

| string
| LucideIconData

text

Type

string

Composite API

q-segmented-control-item-root

Prop	Type
value ^* The value of the item.	string
disabled Whether the item is disabled.	boolean
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string

value

Type

string

Description

The value of the item.

disabled

Type

boolean

Description

Whether the item is disabled.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

Attribute / Property	Value
`class`	'qui-segmented-control__item'
`data-active`
`data-disabled`
`data-focus`
`data-focus-visible`
`data-hover`
`data-invalid`
`data-part`	'root'
`data-readonly`
`data-scope`	'checkbox'
`data-state`	\| 'checked' \| 'indeterminate' \| 'unchecked'

class

Value

'qui-segmented-control__item'

data-active

Value

data-disabled

Value

data-focus

Value

data-focus-visible

Value

data-hover

Value

data-invalid

Value

data-part

Value

'root'

data-readonly

Value

data-scope

Value

'checkbox'

data-state

Value

| 'checked'
| 'indeterminate'
| 'unchecked'

q-segmented-control-item-text

The text of the segmented control item.

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

Attribute / Property	Value
`class`	'qui-segmented-control__item-text'
`data-active`
`data-disabled`
`data-focus`
`data-focus-visible`
`data-hover`
`data-invalid`
`data-part`	'label'
`data-readonly`
`data-scope`	'checkbox'
`data-state`	\| 'checked' \| 'indeterminate' \| 'unchecked'

class

Value

'qui-segmented-control__item-text'

data-active

Value

data-disabled

Value

data-focus

Value

data-focus-visible

Value

data-hover

Value

data-invalid

Value

data-part

Value

'label'

data-readonly

Value

data-scope

Value

'checkbox'

data-state

Value

| 'checked'
| 'indeterminate'
| 'unchecked'

q-segmented-control-hidden-input

The segmented control item hidden input.

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

Attribute / Property	Value
`class`	'qui-segmented-control__item-hidden-input'
`data-active`
`data-disabled`
`data-focus`
`data-focus-visible`
`data-hover`
`data-invalid`
`data-part`	'hidden-input'
`data-readonly`
`data-scope`	'checkbox'
`data-state`	\| 'checked' \| 'indeterminate' \| 'unchecked'
`style`	CSSProperties

class

Value

'qui-segmented-control__item-hidden-input'

data-active

Value

data-disabled

Value

data-focus

Value

data-focus-visible

Value

data-hover

Value

data-invalid

Value

data-part

Value

'hidden-input'

data-readonly

Value

data-scope

Value

'checkbox'

data-state

Value

| 'checked'
| 'indeterminate'
| 'unchecked'

style

Value

CSSProperties

Link

Tag