segmented control
A native radio group fused into one compact control. No script, no reconstructed ARIA.
Example
Basic usage
<fieldset>
<legend>View</legend>
<m-segmented>
<label><input type="radio" name="view" value="list" checked /> List</label>
<label><input type="radio" name="view" value="grid" /> Grid</label>
</m-segmented>
</fieldset>API
m-segmented fuses the presentation of a native radio group. It adds no attributes or JavaScript behavior.
Content/markup contracts
| Content | Contract | Default | Description |
|---|---|---|---|
| Direct children | label wrapping one radio | — | Each direct label carries the visual state of its native radio. |
| Radio group | shared name, distinct values | — | Preserves native mutual exclusion, keyboard navigation, focus, form values, and assistive-technology semantics. |
| Group name | fieldset and legend | — | Wrap the control to provide an accessible name for the choice set. |
Styling
| Target | Value | Default | Description |
|---|---|---|---|
m-segmented | inline fused control | content width | Checked, focus-visible, and disabled presentation is derived from each enclosed native radio. |