Segmented control
Pick one of two to four modes.
<mm-segmented-control name="range" label="Time range" value="7d">
<mm-segment value="24h">24h</mm-segment>
<mm-segment value="7d">7d</mm-segment>
<mm-segment value="30d">30d</mm-segment>
</mm-segmented-control>
Guidance
Segmented controls pick one of two to four modes, such as a time range (“24h”, “7d”, “30d”) or a
view (“Table”, “List”). The track is mm-surface with the control border; the selected segment is
inverted ink. Labels are short and sentence case. It is a radio group: one tab stop, arrow keys
move and select (flipped in right-to-left), and it submits its value with a form.
Keyboard follows the WAI-ARIA radio group pattern (https://www.w3.org/WAI/ARIA/apg/patterns/radio/).
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The selected value. |
label | label | string | '' | Group label, shown above the track unless hide-label is set. |
hideLabel | hide-label | boolean | false | Visually hide the label (it is still announced). Common in toolbars. |
help | help | string | '' | |
error | error | string | '' | |
segments | MmSegment[] | |||
name | name | string | '' | Name submitted with the form. |
disabled | disabled | boolean | false | Disables the control and excludes it from submission. |
required | required | boolean | false | Requires a value before the form submits. |
form | HTMLFormElement | null | |||
validity | ValidityState | |||
validationMessage | string | |||
willValidate | boolean | |||
isDisabled | boolean | True when disabled directly or by a disabled ancestor fieldset. |
Methods
| Method | Description |
|---|---|
formResetCallback() | Restore the initial value when the owning form resets. |
Events
| Event | Detail | Description |
|---|---|---|
change | Event | Native-style change event. |
mm-change | CustomEvent<{ value: string }> | The selected segment changed by user action. |
mm-input | CustomEvent<{ value: string }> | Fired with mm-change. |
Slots
| Slot | Description |
|---|---|
| Default | mm-segment elements. |
CSS parts
| Part | Description |
|---|---|
track | The radio group track. |
Examples
Every state of mm-segmented-control in Storybook, with keyboard and screen reader tests.