@solid-aria/radio
v0.1.3
Published
Primitives for building accessible radio and radio group component.
Downloads
4,462
Readme
@solid-aria/radio
Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
Installation
npm install @solid-aria/radio
# or
yarn add @solid-aria/radio
# or
pnpm add @solid-aria/radio
createRadio
Provides the behavior and accessibility implementation for a radio component.
Features
Radio can be built with the <input>
HTML element, but this can be difficult to style. createRadio
helps achieve accessible radios that can be styled as needed.
- Built with a native HTML
<input>
element, which can be optionally visually hidden to allow custom styling - Full support for browser features like form autofill
- Keyboard focus management and cross browser normalization
- Labeling support for assistive technology
createRadioGroup
Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options.
Features
Radio groups can be built in HTML with the <fieldset>
and <input>
elements, however these can be difficult to style. useRadioGroup and useRadio help achieve accessible radio groups that can be styled as needed.
- Radio groups are exposed to assistive technology via ARIA
- Each radio is built with a native HTML
<input>
element, which can be optionally visually hidden to allow custom styling - Full support for browser features like form autofill
- Keyboard focus management and cross browser normalization
- Group and radio labeling support for assistive technology
How to use it
This example uses native input elements for the radios, and SolidJS context to share state from the group to each radio. An HTML <label>
element wraps the native input and the text to provide an implicit label for the radio.
import {
AriaRadioGroupProps,
AriaRadioProps,
createRadio,
createRadioGroup
} from "@solid-aria/radio";
function RadioGroup(props: AriaRadioGroupProps) {
const { RadioGroupProvider, groupProps, labelProps, state } = createRadioGroup(props);
return (
<div {...groupProps}>
<span {...labelProps}>{props.label}</span>
<RadioGroupProvider>{props.children}</RadioGroupProvider>
</div>
);
}
function Radio(props: AriaRadioProps) {
let ref: HTMLInputElement | undefined;
const { inputProps, state } = createRadio(props, () => ref);
return (
<label style={{ display: "block" }}>
<input {...inputProps} ref={ref} />
{props.children}
</label>
);
}
function App() {
return (
<RadioGroup label="Favorite pet">
<Radio value="dogs">Dogs</Radio>
<Radio value="cats">Cats</Radio>
</RadioGroup>
);
}
Styling
To build a custom styled radio button, you can make the native input element visually hidden. This is possible using the createVisuallyHidden
primitive. It is still in the DOM and accessible to assistive technology, but invisible. This example uses SVG to build the visual radio button, which is hidden from screen readers with aria-hidden.
For keyboard accessibility, a focus ring is important to indicate which element has keyboard focus. This is implemented with the createFocusRing
primitive. When isFocusVisible
is true, an extra SVG element is rendered to indicate focus. The focus ring is only visible when the user is interacting with a keyboard, not with a mouse or touch.
import { createFocusRing } from "@solid-aria/focus";
import {
AriaRadioGroupProps,
AriaRadioProps,
createRadio,
createRadioGroup
} from "@solid-aria/radio";
import { createVisuallyHidden } from "@solid-aria/visually-hidden";
function RadioGroup(props: AriaRadioGroupProps) {
const { RadioGroupProvider, groupProps, labelProps, state } = createRadioGroup(props);
return (
<div {...groupProps}>
<span {...labelProps}>{props.label}</span>
<RadioGroupProvider>{props.children}</RadioGroupProvider>
</div>
);
}
function Radio(props: AriaRadioProps) {
let ref: HTMLInputElement | undefined;
const { inputProps, state } = createRadio(props, () => ref);
const { isFocusVisible, focusProps } = createFocusRing();
const { visuallyHiddenProps } = createVisuallyHidden();
const isSelected = () => state.selectedValue() === props.value;
const strokeWidth = () => (isSelected() ? 6 : 2);
return (
<label style={{ display: "flex", "align-items": "center" }}>
<div {...visuallyHiddenProps}>
<input {...inputProps} {...focusProps} ref={ref} />
</div>
<svg width={24} height={24} aria-hidden="true" style={{ "margin-right": 4 }}>
<circle
cx={12}
cy={12}
r={8 - strokeWidth() / 2}
fill="none"
stroke={isSelected() ? "orange" : "gray"}
stroke-width={strokeWidth()}
/>
{isFocusVisible() && (
<circle cx={12} cy={12} r={11} fill="none" stroke="orange" stroke-width={2} />
)}
</svg>
{props.children}
</label>
);
}
function App() {
return (
<RadioGroup label="Favorite pet">
<Radio value="dogs">Dogs</Radio>
<Radio value="cats">Cats</Radio>
</RadioGroup>
);
}
Internationalization
RTL
In right-to-left languages, the radio group and radio buttons should be mirrored. Ensure that your CSS accounts for this.
Changelog
All notable changes are described in the CHANGELOG.md file.