For AI agents: the complete documentation index is available at /ooui-react/en/llms.txt, the full documentation bundle is available at /ooui-react/en/llms-full.txt, and this page is available as Markdown at /ooui-react/en/components/radio-input/index.md.
ooui-react
  • English

      • RadioInput

      Source | Original component

      A single radio button. It has no text label of its own — when you need one, wrap it in FieldLayout.

      Basic usage

      The checked state uses the checked / defaultChecked / onChange channels; the first argument of onChange is the new checked boolean. Note that a radio cannot be un-checked by clicking it again — clearing an exclusive group needs an extra mechanism (such as a "clear" button that resets the state).

      Clear
      import { useState } from "react";
import { Button, RadioInput } from "ooui-react";

function App() {
  const [checked, setChecked] = useState(true);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
      <label style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <RadioInput checked={checked} onChange={setChecked} />
        Checked: {String(checked)}
      </label>
      <label style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <RadioInput defaultChecked />
        Uncontrolled; initially checked
      </label>
      <Button onClick={() => setChecked(false)}>Clear</Button>
    </div>
  );
}

export default App;

      Same-name exclusivity and the form submission value

      Give several RadioInputs the same name and the browser's native mechanism guarantees group exclusivity with at most one item submitted with the form. value is the form submission value (written to the native <input>'s value attribute, defaulting to an empty string). It does not affect the checked state.

      Current selection: medium
      import { useState } from "react";
import { RadioInput } from "ooui-react";

function App() {
  const [size, setSize] = useState("medium");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start" }}>
      {["small", "medium", "large"].map((item) => (
        <label key={item} style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <RadioInput
            name="size"
            value={item}
            checked={size === item}
            onChange={(next) => next && setSize(item)}
          />
          {item}
        </label>
      ))}
      <div>Current selection: {size}</div>
    </div>
  );
}

export default App;

      Using it with FieldLayout

      The field's text label is usually delegated to FieldLayout. It automatically associates the label with this radio's native <input> (clicking the label selects it); to specify the association target manually, give the input element's id via inputId.

      import { FieldLayout, RadioInput } from "ooui-react";

function App() {
  return (
    <div style={{ maxWidth: 320 }}>
      <FieldLayout label="Default option" align="inline">
        <RadioInput defaultChecked />
      </FieldLayout>
    </div>
  );
}

export default App;

      Disabled

      disabled outputs aria-disabled and disables the native <input>, so the radio can no longer be selected. Inside a native <fieldset> such as FieldsetLayout, the group-level disable propagates to it.

      import { RadioInput } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <RadioInput disabled />
      <RadioInput disabled defaultChecked />
    </div>
  );
}

export default App;

      API

      PropDescriptionTypeDefault
      checkedChecked state (controlled; passing it enables controlled mode)boolean—
      defaultCheckedUncontrolled initial checked stateboolean—
      onChangeChecked-change handler (new state first, includes the native event)ChangeHandler<boolean, HTMLInputElement>—
      valueForm submission value (written to <input>'s value, does not affect checked state)string | number''
      nameForm field name (lands on <input>; same name = same exclusive group)string—
      inputIdThe inner <input>'s id (pairs with a label's htmlFor)string—
      requiredRequired (native required)booleanfalse
      disabledWhether disabledbooleanfalse
      accessKeyAccess key (lands on <input>)string—
      ...restNative span props (className, id, data-*, etc.) passed straight to the rootHTMLAttributes<HTMLSpanElement>—

      title, dir and tabIndex are taken over by the component and land on the inner <input>; the component ref points to the outer <span>.

      See also