Radio

A web component for labelled radio buttons grouped by name across shadow roots, built on Material Web.

A radio button with an optional label, one of a group of mutually exclusive options.

Installation

npm install @3mo/radio

import '@3mo/radio'

Usage

<mo-radio label='Standard shipping'></mo-radio>

Examples

• Groups — Radios sharing a name form a group: selecting one clears the others, and the arrow keys move the selection within it.
• States — Selected and unselected, each also disabled.
• Custom Properties — --mo-radio-accent-color colors a selected radio, --mo-radio-unchecked-color an unselected one and --mo-radio-disabled-color a disabled one.

Accessibility

Radios with the same name form a group across the whole document, with the selected radio as its one tab stop. While none is selected every enabled radio is a tab stop, where the ARIA practices have only the first.

| Key | Does | | --- | --- | | The arrows | Selects the next or previous enabled radio of the group, wrapping. | | Space | Selects the radio. |

The radios have no container with a radiogroup role: wrap them in one with a name, or use a mo-selection-group.

API

mo-radio

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | label | label | string | "" | The label of the radio. | | name | name | string | "" | The name of the radio group. Radios sharing a name are mutually exclusive document-wide. | | disabled | disabled | boolean | false | Whether the radio is disabled or not. | | selected | selected | boolean | | Whether the radio is selected or not. |

Events

| Name | Detail | Description | | --- | --- | --- | | change | boolean | Dispatched when the selected state of the radio changes. |

CSS custom properties

| Name | Description | | --- | --- | | --mo-radio-accent-color | The color of a selected radio and of its focus ring | | --mo-radio-disabled-color | The color of a disabled radio and its label | | --mo-radio-unchecked-color | The color of an unselected radio |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH