Segmented Control
A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Like buttons, segments can contain text or images. Segmented controls are often used to display different views.
Figma Link
- Web Components
- Flutter
Demo
A segmented control is a linear set of two or more segments, each of which
functions as a mutually exclusive button. Like buttons, segments can contain
text or images. Segmented controls are often used to display different views.
To listen for changes, add a click event listener to the zeta-segmented-control element.
To set the active segment, set the active property on the zeta-segmented-item element.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-segmented-control--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The content of the segmented control. Should be a collection of zeta-segmented-item elements. | zeta-segmented-item[] |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
Flutter component not available yet