@react-aria/radio

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>
  );
}