Radio A control element for selecting one option from a group of options.
Table of contents
Usage guidelines
When to use
- Use when only one option may be selected and fewer than five options are available.
- When more than one option may be selected, use checkboxes.
- When five or more options are available, use a select.
- When there are two options, and they are about turning something on or off, or enabling / disabling the same thing, use a switch.
How to use
- Visually display radio buttons in a vertical (rather than horizontal) list.
- All text associated with a radio button should be in sentence case.
- Place radio buttons to the left of their text. The text should be wrapped in a
<label>element that is a directly adjacent sibling of the native radio input element.
Accessibility
- Native keyboard support for radio buttons is carried over to the Resonance radio component.
Attributes
An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.
<res-component booleanAttribute stringAttribute="parameter">
<child-element></child-element>
</res-component>| Attribute | Type | Description |
|---|---|---|
checked | boolean | Set initial state to checked |
disabled | boolean | Set initial state to disabled |
API
| Name | Type | Data | Description |
|---|---|---|---|
checked | property | boolean | Get/set checked state |
disabled | property | boolean | Get/set disabled state |
Notes
Required DOM
Without these, the component will throw an error on render.
<input type="radio">- (As first child of res-radio)
Supported optional DOM
If added as children, these elements will receive specific styles and/or functionality.
<label>- Labelling text (as second child of res-radio)
History
| Version | Note |
|---|---|
| 0.12.0 | Apply new spacing scale. Add min-width to the radio control so that it doesn't get shrunk when the component is too narrow. |
| 0.11.10 | Focus the label selector so it doesn't get applied inconsistently. |
| 0.11.2 | Prevent duplicate elements from being created |
| 0.10.0 | Color update |
| 0.7.0 | Web component refactor |
| 0.5.0 | Full refactor! Removed the value and name attributes, as well as the value API. Label positioning now mirrors tag order. |
| 0.3.0 | Thinner border |
| 0.2.0 | Cleaner markup, and no longer using classes for .checked and .disabled. |
| 0.1.0 | Initial build to spec. |