Radio group
Pick one of a few options.
<mm-radio-group name="schedule" label="Refresh schedule" value="daily">
<mm-radio value="hourly">Every hour</mm-radio>
<mm-radio value="daily">Every day</mm-radio>
<mm-radio value="weekly">Every week</mm-radio>
</mm-radio-group>
Guidance
Radio groups pick exactly one of a few options that are all worth seeing at once: a refresh schedule, a sampling strategy, a lineage depth. For more than five options, use a select. The group label works as a legend: it names the group and sits above it in the label style.
Keyboard follows the WAI-ARIA radio group pattern
(https://www.w3.org/WAI/ARIA/apg/patterns/radio/): Tab enters the group on the chosen option (or
the first), arrow keys move and choose (Left and Right swap in right-to-left), Space chooses the
focused option, and Tab leaves the group. orientation only changes the layout.
Form-associated: submits the chosen value under name. required means one must be chosen.
The value attribute, or the checked attribute on an mm-radio, is the default the form
resets to.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The chosen option's value. |
orientation | orientation | 'vertical' | 'horizontal' | 'vertical' | vertical (default) or horizontal layout. Arrow keys work in both directions either way. |
radios | MmRadio[] | The options, in order. | ||
label | label | string | '' | Field label. Rendered above the control unless hide-label, and always the accessible name. |
help | help | string | '' | Help text under the control. |
error | error | string | '' | Error text: a sentence saying what to fix. Shows the crimson border, an icon and sets aria-invalid. |
hideLabel | hide-label | boolean | false | Hides the label visually; it stays the accessible name. |
optional | optional | boolean | false | Marks the field as optional, in words. |
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 |
|---|---|---|
mm-input | CustomEvent<MmValueDetail> | When an option is chosen. |
mm-change | CustomEvent<MmValueDetail> | When an option is chosen. |
input | InputEvent | When an option is chosen. |
change | Event | When an option is chosen. |
Slots
| Slot | Description |
|---|---|
| Default | mm-radio options. |
CSS parts
| Part | Description |
|---|---|
label | The group label (legend). |
group | The radiogroup wrapper. |
help | The help line. |
error | The error line. |
Examples
Every state of mm-radio-group in Storybook, with keyboard and screen reader tests.