Segmented Control

Segmented Control is a single-choice selector in the form of rectangular visuals.

Overview

Functionality is similar to Radio Buttons, but is visually more prominent.

Usage

  • Need for more visual prominence than Radio Button
  • Workflow view switching
  • Single-choice interactions in forms

Sample

2 samples
1
2
3
4
5
6
7
8
<calcite-segmented-control>
    <calcite-segmented-control-item value="transportation" checked>
        Transportation
    </calcite-segmented-control-item>
    <calcite-segmented-control-item value="education">Education</calcite-segmented-control-item>
    <calcite-segmented-control-item value="healthcare">Healthcare</calcite-segmented-control-item>
    <calcite-segmented-control-item value="publicsafety">Public safety</calcite-segmented-control-item>
</calcite-segmented-control>
v3.0.3

Best practices

Segmented Control appearanceUsage
"solid"For primary selections. Solid Segmented Control Items draw more attention than outline.
"outline"To be used for secondary selections. Consist of text and a border with a foreground fill.
Correct Segmented Control content length
Do use Segmented Controls to switch among workflow choices.
Avoid Segmented Control navigation
Avoid using Segmented Controls as page navigation.

Accessibility

Keyboard navigation

KeyFunction
Arrow leftMoves focus and selection to previous calcite-segmented-control-item. If the current focus and selection is the first calcite-segmented-control-item, the focus and selection will cycle to the last calcite-segmented-control-item.
Arrow rightMoves focus and selection to next calcite-segmented-control-item. If the current focus and selection is the last calcite-segmented-control-item, the focus and selection will cycle to the first calcite-segmented-control-item.
Arrow downMoves focus and selection to previous calcite-segmented-control-item. If the current focus and selection is the first calcite-segmented-control-item, the focus and selection will cycle to the last calcite-segmented-control-item.
Arrow upMoves focus and selection to next calcite-segmented-control-item. If the current focus and selection is the last calcite-segmented-control-item, the focus and selection will cycle to the first calcite-segmented-control-item.
TabMoves focus in and out of component.
Tab and ShiftMoves focus in and out of component.

Writing and copy

  • Keep text for Segmented Controls simple and succinct
  • Avoid using more than 1-2 words in each item
  • Do not use punctuation like commas or periods in Segmented Control text
  • Do not use contractions, such as "you're", "aren't", "can't", and "haven't" to reduce confusion
  • Avoid writing Segmented Control text as questions
  • Recommended character maximum for each calcite-segmented-control-item: 20

API reference

Properties

PropertyAttributeDescriptionTypeDefault
appearanceappearanceSpecifies the appearance style of the component."outline" | "outline-fill" | "solid""solid"
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
layoutlayoutDefines the layout of the component."horizontal" | "vertical""horizontal"
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedItemread-onlyThe component's selected item HTMLElement.HTMLCalciteSegmentedControlItemElement
statusstatusSpecifies the status of the validation message."idle" | "invalid" | "valid""idle"
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueThe component's selectedItem value.string
widthwidthSpecifies the width of the component. [Deprecated] The "half" value is deprecated, use "full" instead."auto" | "full""auto"

Slots

NameDescription
default (unnamed)A slot for adding calcite-segmented-control-items.

Styles

NameDescription
--calcite-segmented-control-border-colorSpecifies the component's border color.

Events

NameDescriptionBehavior
calciteSegmentedControlChangeFires when the calcite-segmented-control-item selection changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close