Radio

Radio buttons allow users to select only a single option from a list of options. There are 2 states in a Radio button: Checked and Unchecked.

To enhance accessibility, Radio buttons come with a label which is placed beside the component. The labels are of type text and they come in 3 sizes:

• small (s)
• medium (m) — default
• large (l)

The size of the Radio button remains the same for all label sizes. You can choose to skip the standard label and bind the Radio button with you own label as well.

Radio buttons support most of the input="radio" attributes like checked, value, name, onChange & disabled as well as data-* attributes. To get a handle of the underlying DOM element, use React Refs.

Accessibility

• Use tab to move focus between Radio buttons.
• Press space to make a selection.
• Use arrow keys to change the selection among a list of Radio buttons.
• Radio buttons accept the aria-* attributes for "radio" role.

Accessibility must-haves

• Add aria-label or aria-labelledby for cases where Radio buttons do not have a dedicated label.

• Use id and htmlFor props to associate your custom label with the Radio button.

Usage

import { Radio } from "@asphalt-react/radio"

<Radio value="GoPay" label="Mode of payment" />

Props

label

Label for the radio button.

| type | required | default | | ------ | -------- | ------- | | string | false | "" |

size

Controls the label size. Size of the radio buton doesn't change. Accepts s, m, l for small, medium & large

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |