InputsReact

Radio

One radio button of a RadioGroup.

Rendered by React 19.3.1

import * as React from 'react'
import { Radio } from '@hamur/react/radio'
import { RadioGroup } from '@hamur/react/radio-group'

export default function RadioExample() {
  const [size, setSize] = React.useState('medium')
  return (
    <div className="stack">
      <RadioGroup className="stack" defaultValue="medium" onValueChange={setSize}>
        <label className="row">
          <Radio.Root className="radio" value="small">
            <Radio.Indicator className="radio-indicator" />
          </Radio.Root>
          Small
        </label>
        <label className="row">
          <Radio.Root className="radio" value="medium">
            <Radio.Indicator className="radio-indicator" />
          </Radio.Root>
          Medium
        </label>
        <label className="row">
          <Radio.Root className="radio" value="large" disabled>
            <Radio.Indicator className="radio-indicator" />
          </Radio.Root>
          Large (sold out)
        </label>
      </RadioGroup>
      <p className="muted">Size: {size}</p>
    </div>
  )
}

91Tests passing in React · 0 failing

9.9 KiBSize

Not measured yetMemory

Not measured yetSpeed

productdevbook and 18 upstream authors8 commits · last Nov 3

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<Radio.Root>
  <Radio.Indicator />
</Radio.Root>

Examples

Radio is shown in RadioGroup's examples; it has no demo of its own.

API reference

7 props across 2 parts, in React syntax. className, style, render are listed once, under Shared props.

Indicator`Radio.Indicator`

Indicates whether the radio button is selected. Renders a <span>.

Indicator props
Prop	Type	Default
`keepMounted`Whether to keep the HTML element in the DOM when the radio button is inactive.	`boolean`	`false`

Indicator data attributes
Data attribute	Description
`data-checked`	Present when the radio is checked.
`data-unchecked`	Present when the radio is not checked.
`data-disabled`	Present when the radio is disabled.
`data-readonly`	Present when the radio is readonly.
`data-required`	Present when the radio is required.
`data-starting-style`	Present when the radio indicator begins animating in.
`data-ending-style`	Present when the radio indicator is animating out.
`data-valid`	Present when the radio is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the radio is in an invalid state (when wrapped in Field.Root).
`data-touched`	Present when the radio has been touched (when wrapped in Field.Root).
`data-dirty`	Present when the radio's value has changed (when wrapped in Field.Root).
`data-filled`	Present when the radio is checked (when wrapped in Field.Root).
`data-focused`	Present when the radio is focused (when wrapped in Field.Root).

Root`Radio.Root`

Represents the radio button itself. and a hidden <input> beside. Renders a <span>.

Root props
Prop	Type	Default
`value`requiredThe unique identifying value of the radio in a group.	`TValue`	`—`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`false`
`disabled`Whether the component should ignore user interaction.	`boolean`	`—`
`readOnly`Whether the user should be unable to select the radio button.	`boolean`	`—`
`required`Whether the user must choose a value before submitting a form.	`boolean`	`—`
`inputRef`A ref to access the hidden input element.	`React.Ref<HTMLInputElement>`	`—`

Root data attributes
Data attribute	Description
`data-checked`	Present when the radio is checked.
`data-unchecked`	Present when the radio is not checked.
`data-disabled`	Present when the radio is disabled.
`data-readonly`	Present when the radio is readonly.
`data-required`	Present when the radio is required.
`data-valid`	Present when the radio is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the radio is in an invalid state (when wrapped in Field.Root).
`data-touched`	Present when the radio has been touched (when wrapped in Field.Root).
`data-dirty`	Present when the radio's value has changed (when wrapped in Field.Root).
`data-filled`	Present when the radio is checked (when wrapped in Field.Root).
`data-focused`	Present when the radio is focused (when wrapped in Field.Root).

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Keyboard
Keys	Does	Part
`ArrowDownArrowUpArrowLeftArrowRight`	Selects the next or previous radio of the group	Root

Accessibility

What the parts set
Part	Sets	So that
Root	`role="radio"`, `aria-checked`	a screen reader reads it as a radio button and whether it is chosen
Root	`aria-labelledby` to an associated label	a `<label>` or Field label names the radio
Root	a hidden `<input type="radio">` with `aria-hidden="true"` and `tabindex="-1"`	the form gets the value without a second control to read or tab to
Indicator	renders a `<span>` with your mark	the dot is decoration; the state is on Root

Focus order

The group is one tab stop: the checked radio, or the first one.
Arrow keys move to and select the other radios.