Segmented control

Preview

Basic segmented control
With icons
With disabled option

Usage

<cs-segmented-control selected-id="seg-1">
  <cs-segmented-control-option id="seg-1" text="Day"></cs-segmented-control-option>
  <cs-segmented-control-option id="seg-2" text="Week"></cs-segmented-control-option>
  <cs-segmented-control-option id="seg-3" text="Month"></cs-segmented-control-option>
</cs-segmented-control>

Properties

aria-labelledbystring default: ''

Adds aria-labelledby to the component. Create a visually hidden element with an ID and set this property to that ID. If you don't want the label to be visible in narrow containers, use this property instead of label.

labelstring default: ''

Defines the label of the entire segmented control. In the standard view (that is, all individual segments are visible), this label is used as aria-label on the group of segments. In a narrow container, where this component is displayed as a select component, the label is visible and attached to the select component, unless ariaLabelledBy is defined. Don't use label and ariaLabelledBy at the same time.

optionsReadonlyArray<SegmentedControlProps.Option> default: []

An array of objects representing options. Only up to 6 options are supported. Each segment has the following properties:

  • id (string) - The ID of the segment.
  • disabled [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.
  • disabledReason (string) - (Optional) Displays tooltip near the segment when disabled. Use to provide additional context.
  • iconName (string) - (Optional) Specifies the name of the icon, used with the icon component.
  • iconAlt (string) - (Optional) Specifies alternate text for the icon when using iconUrl, or iconName without text. This is required when you use an icon without text.
  • iconUrl (string) - (Optional) Specifies the URL of a custom icon.
  • iconSvg (unknown) - (Optional) Custom SVG icon. Equivalent to the svg slot of the icon component.
  • text (string) - (Optional) Specifies the text of the segment.
selected-idstring | nullrequired

ID of the selected option. If you want to clear the selection, use null.

Events

changeCustomEvent<SegmentedControlProps.ChangeDetail>

Called when the user selects a different segment.