# Radio
### Introduction
Allows selection of a single item in a group of options.
If requiring multi-selection, please consider checkboxes or listbox instead.
HTML gives us native radio buttons that are fully accessible by default. Unfortunately, the look-and-feel of these controls is often at odds with a web site's design system or branding guidelines. This issue is compounded by the fact that native radio buttons are traditionally very difficult to re-style.
Our pattern shows how modern CSS and SVG can be used to create a custom *facade* over the native radio buttons, while maintaining accessibility requirements.
### Working Examples
Experience the pattern in action on our companion [eBay MIND Patterns examples website](https://ebay.github.io/mindpatterns/input/radio/index.html).
Examine the required markup structure in our [Bones GitHub project](https://github.com/ianmcburnie/bones#radio).
View a fully styled example in our [eBay Skin CSS framework](https://opensource.ebay.com/skin/component/radio/).
### Best Practices
Radio buttons **must be** grouped together and a group **must contain** at least two radio buttons.
Each group of radio buttons **must** be labelled. Typically achieved with a `
```
The fieldset creates the grouping semantics. The legend creates the group label.
Each input and label pair are further grouped inside a span container. This span container can be replaced with a div for vertical stacking of radio buttons.
#### Custom Radio
Native HTML radio buttons are 100% accessible by default, but may not match your design system look & feel.
We will now show how CSS and SVG can give you the visuals you desire, without any JavaScript.
We are going to:
1. *Hide* the native radio button
2. Display one of two custom icons (checked or unchecked) in it's place
3. Assign a focus outline to the custom icon
#### Markup Changes
We need to create a new container element that will host each radio button and its icon. We give it a class of `radio`:
```markup
```
For convenience, we also add a `.radio__control` class to each input tag.
#### Invisible Input
We make the native input invisible, and keep it in place, using opacity and absolute positioning:
```css
.radio__control {
opacity: 0;
position: absolute;
z-index: 1;
}
```
We keep the radio in place, so that we can continue to click on it. Although invisible, it is still the native input that receives click and focus events. This is important so that the underlying input maintains all built-in event handling and state.
Remember, clicking the label of a radio button will also toggle the checked state.
#### Custom Icon
We need two icons: checked and unchecked.
We have mentioned that SVG will be used to create the icon. We actually have two implementation choices when it comes to our SVG:
* background SVG
* foreground SVG
Here's how the markup will look with background SVG:
```markup
```
And here's how the markup will look with foreground SVG:
```markup
```
This markup assumes that the symbol definitions for `#icon-radio-unchecked` and `#icon-radio-checked` exist on the page.
The hidden attribute ensures that the SVG icon is not visible if the page is in a non-CSS state; it also helps prevent a flash of unstyled content (FOUC).
As you can see, the background SVG markup is more concise, however it has two major issues to be aware of:
* the color of the icon is not changeable with CSS
* alternate variations are needed for windows high contrast mode
On the other hand, foreground SVG has neither of these issues, and therefore is our preferred approach.
#### Custom Focus Outline
Remember that the keyboard will always focus on the *real*, native input. However, we cannot see the real focus indicator because the element has 0 opacity. To workaround this, we can create a custom focus outline around the SVG element:
```css
.radio__control:focus + .radio__icon {
outline: 1px dotted #767676;
}
```
A dotted border is a good choice, mimicking that of various browsers (such as Firefox).
### ARIA Reference
This section gives an overview of our use of ARIA, within the specific context of the radio pattern.
#### aria-hidden
Removes the presentational SVG element from the accessibility tree.