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-select/index.md.
ooui-react
  • English

      • RadioSelect

      Source | Original component

      A radio group: several radio items in one group, mutually exclusive with at most one selected.

      Basic usage

      The selected value uses the value / defaultValue / onChange channels. Clearing the current selection never produces a new value — onChange's argument is always the newly selected value.

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

const options = [
  { value: "small", children: "Small" },
  { value: "medium", children: "Medium" },
  { value: "large", children: "Large" },
];

function App() {
  const [size, setSize] = useState<string | number>("medium");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <RadioSelect options={options} value={size} onChange={setSize} name="size" />
      <div>Current selection: {String(size)}</div>
      <RadioSelect options={options} defaultValue="large" />
    </div>
  );
}

export default App;

      With FieldLayout

      To give the whole group a field label, wrap it with FieldLayout; the label is associated with the group container, and clicking it focuses the group.

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

function App() {
  return (
    <div style={{ maxWidth: 320 }}>
      <FieldLayout label="Notification method">
        <RadioSelect
          name="notify"
          defaultValue="email"
          options={[
            { value: "email", children: "Email" },
            { value: "sms", children: "SMS" },
            { value: "none", children: "No notifications" },
          ]}
        />
      </FieldLayout>
    </div>
  );
}

export default App;

      Disabled

      • An option's own disabled skips that item (not selectable).
      • Component-level disabled disables every option in the group, and the group state wins. See Selection and options · Disabled.
      import { RadioSelect } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <RadioSelect
        defaultValue="a"
        options={[
          { value: "a", children: "Enabled" },
          { value: "b", children: "Disabled item", disabled: true },
          { value: "c", children: "Also enabled" },
        ]}
      />
    </div>
  );
}

export default App;

      Keyboard and focus

      • Focus rests on the whole group (individual items are not in the Tab order). ↑↓←→ move cyclically between non-disabled items and select directly; Enter re-affirms the current item.
      • On first Tab focus to the group with nothing selected, the first non-disabled item is auto-selected (matching native radio-group behavior).
      • onChange's second argument is the native change event; changing selection via arrow keys does not fire a native change (matching the original), so the second argument may be absent.

      API

      PropDescriptionTypeDefault
      optionsThe option set; each item has value and children (the option text)RadioSelectOptionProps[]—
      valueCurrent selected value (controlled; passing it enables control)string | number—
      defaultValueInitial selected value for uncontrolled usestring | number—
      onChangeSelected-value change callback (value-first, incl. native event)ChangeHandler<string | number | undefined, HTMLInputElement>—
      nameForm field name, passed to each option's native radio (same name = mutually exclusive)string—
      disabledWhether disabled (also disables every option in the group)booleanfalse
      ...restNative div props (className, id, aria-*, etc.) passed straight to the group containerHTMLAttributes<HTMLDivElement>—

      See also