@react-aria/radio

What is @react-aria/radio?

@react-aria/radio is a library that provides accessible radio button components for React applications. It is part of the React Aria collection, which focuses on providing high-quality, accessible UI components.

What are @react-aria/radio's main functionalities?

Basic Radio Group

This code demonstrates how to create a basic radio group using @react-aria/radio. It includes a RadioGroup component that manages the state and a Radio component that renders individual radio buttons.

import { useRadioGroupState } from '@react-stately/radio';
import { useRadioGroup, useRadio } from '@react-aria/radio';
import { useRef } from 'react';

function RadioGroup(props) {
  let state = useRadioGroupState(props);
  let { radioGroupProps } = useRadioGroup(props, state);

  return (
    <div {...radioGroupProps}>
      {props.children}
    </div>
  );
}

function Radio(props) {
  let ref = useRef();
  let { inputProps } = useRadio(props, props.state, ref);

  return (
    <label>
      <input {...inputProps} ref={ref} />
      {props.children}
    </label>
  );
}

export default function App() {
  return (
    <RadioGroup label="Favorite Pet">
      <Radio value="dogs">Dogs</Radio>
      <Radio value="cats">Cats</Radio>
    </RadioGroup>
  );
}

Custom Styling

This code demonstrates how to apply custom styling to the radio group and radio buttons using CSS classes. The styles are defined in an external stylesheet (styles.css).

import { useRadioGroupState } from '@react-stately/radio';
import { useRadioGroup, useRadio } from '@react-aria/radio';
import { useRef } from 'react';
import './styles.css';

function RadioGroup(props) {
  let state = useRadioGroupState(props);
  let { radioGroupProps } = useRadioGroup(props, state);

  return (
    <div {...radioGroupProps} className="radio-group">
      {props.children}
    </div>
  );
}

function Radio(props) {
  let ref = useRef();
  let { inputProps } = useRadio(props, props.state, ref);

  return (
    <label className="radio-label">
      <input {...inputProps} ref={ref} className="radio-input" />
      {props.children}
    </label>
  );
}

export default function App() {
  return (
    <RadioGroup label="Favorite Pet">
      <Radio value="dogs">Dogs</Radio>
      <Radio value="cats">Cats</Radio>
    </RadioGroup>
  );
}

Disabled Radio Buttons

This code demonstrates how to create a radio group with disabled radio buttons. The 'isDisabled' prop is used to disable specific radio buttons.

import { useRadioGroupState } from '@react-stately/radio';
import { useRadioGroup, useRadio } from '@react-aria/radio';
import { useRef } from 'react';

function RadioGroup(props) {
  let state = useRadioGroupState(props);
  let { radioGroupProps } = useRadioGroup(props, state);

  return (
    <div {...radioGroupProps}>
      {props.children}
    </div>
  );
}

function Radio(props) {
  let ref = useRef();
  let { inputProps } = useRadio(props, props.state, ref);

  return (
    <label>
      <input {...inputProps} ref={ref} disabled={props.isDisabled} />
      {props.children}
    </label>
  );
}

export default function App() {
  return (
    <RadioGroup label="Favorite Pet">
      <Radio value="dogs">Dogs</Radio>
      <Radio value="cats" isDisabled={true}>Cats</Radio>
    </RadioGroup>
  );
}

Other packages similar to @react-aria/radio

react-radio-group

react-radio-group is a simple and flexible radio group component for React. It provides a straightforward API for creating radio groups and handling their state. Compared to @react-aria/radio, it is less focused on accessibility features but is easier to use for basic use cases.

react-radio-buttons

react-radio-buttons is another library for creating radio button groups in React. It offers a set of customizable radio button components with support for themes and custom styles. While it provides more styling options, it may not be as robust in terms of accessibility as @react-aria/radio.

react-accessible-form

react-accessible-form is a library that provides accessible form components, including radio buttons. It focuses on ensuring that all form elements are accessible and compliant with ARIA standards. It is similar to @react-aria/radio in its emphasis on accessibility but offers a broader range of form components.

README

@react-aria/radio

This package is part of react-spectrum. See the repo for more details.