Skip to main content
Reakit
DocumentationNewsletter
Spectrum
GitHub
GitHub

Radio

Accessible Radio component that follows the WAI-ARIA Radio Button/Group Pattern.

#Installation

npm install reakit

Learn more in Get started.

#Usage

import { useRadioState, Radio, RadioGroup } from "reakit/Radio";

function Example() {
  const radio = useRadioState();
  return (
    <RadioGroup {...radio} aria-label="fruits">
      <label>
        <Radio {...radio} value="apple" /> apple
      </label>
      <label>
        <Radio {...radio} value="orange" /> orange
      </label>
      <label>
        <Radio {...radio} value="watermelon" /> watermelon
      </label>
    </RadioGroup>
  );
}

#Accessibility

  • Radio has role radio.
  • Radio has aria-checked set to true when it's checked. Otherwise, aria-checked is set to false.
  • Radio extends the accessibility features of Rover, which means it uses the roving tabindex method to manage focus.

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#useRadioState

  • orientation "horizontal" | "vertical" | undefined

    Defines the orientation of the rover list.

  • currentId string | null

    The current focused element ID.

  • loop boolean

    If enabled:

    • Jumps to the first item when moving next from the last item.
    • Jumps to the last item when moving previous from the first item.
  • state any

    The value attribute of the current checked radio.

#Radio

  • disabled boolean | undefined

    Same as the HTML attribute.

  • focusable boolean | undefined

    When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

  • stopId string | undefined

    Element ID.

  • value any

    Same as the value attribute.

  • checked boolean | undefined

    Same as the checked attribute.

13 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • orientation "horizontal" | "vertical" | undefined

    Defines the orientation of the rover list.

  • unstable_moves number

    Stores the number of moves that have been made by calling move, next, previous, first or last.

  • currentId string | null

    The current focused element ID.

  • stops Stop[]

    A list of element refs and IDs of the roving items.

  • register (id: string, ref: RefObject<HTMLElement>) => void

    Registers the element ID and ref in the roving tab index list.

  • unregister (id: string) => void

    Unregisters the roving item.

  • move (id: string | null, unstable_silent?: boolean |...

    Moves focus to a given element ID.

  • next () => void

    Moves focus to the next element.

  • previous () => void

    Moves focus to the previous element.

  • first () => void

    Moves focus to the first element.

  • last () => void

    Moves focus to the last element.

  • state any

    The value attribute of the current checked radio.

  • setState (value: any) => void

    Sets state.

#RadioGroup

No props to show