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
<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>
Best practices
Segmented Control appearance | Usage |
---|---|
"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. |
Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow left | Moves 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 right | Moves 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 down | Moves 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 up | Moves 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 . |
Tab | Moves focus in and out of component. |
Tab and Shift | Moves 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
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
appearance | appearance | Specifies the appearance style of the component. | "outline" | "outline-fill" | "solid" | "solid" |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
form | form | The 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 | |
layout | layout | Defines the layout of the component. | "horizontal" | "vertical" | "horizontal" |
name | name | Specifies the name of the component.
Required to pass the component's value on form submission. | string | |
required | required | When true and the component resides in a form,
the component must have a value in order for the form to submit. | boolean | false |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
selectedItem | The component's selected item HTMLElement . | HTMLCalciteSegmentedControlItemElement | ||
status | status | Specifies the status of the validation message. | "idle" | "invalid" | "valid" | "idle" |
validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | |
validationMessage | validation-message | Specifies the validation message to display under the component. | string | |
validity | The 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;
} | ||
value | value | The component's selectedItem value. | string | |
width | width | Specifies the width of the component. [Deprecated] The "half" value is deprecated, use "full" instead. | "auto" | "full" | "auto" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-segmented-control-item s. |
Styles
Name | Description |
---|---|
--calcite-segmented-control-border-color | Specifies the component's border color. |
Events
Name | Description | Behavior |
---|---|---|
calciteSegmentedControlChange | Fires when the calcite-segmented-control-item selection changes. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |