Radio
Radio buttons are used when options are mutually exclusive, that is only one option can be selected. Radio button can be rendered in various sizes bases on the size
prop. Radio uses its own <label>
element. To add text for the label, use the label
prop. Label can be hidden optionally to show only the Radio input.
Most of the input="radio"
attributes are supported. If you need to get hold of the underlying DOM element, use React's refs as usual.
Usage
import Radio from "@asphalt-react/radio"
;<div>
<Radio label="option 1" />
<Radio label="option 2" />
</div>
Accessibility
- Use tab to move focus between radio groups
- Press space to make a selection
- Use
⬆ or⬇ arrow keys to change the selection - Additional aria attributes like aria-labelledby, aria-checked can be applied too.
Props
label
Label for the radio
type | required | default |
---|---|---|
string | false | "" |
size
Size of the radio. accepts s, m, l for small, medium & large
type | required | default |
---|---|---|
enum | false | "m" |