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

      • RadioSelectInput

      Source | Original component

      A radio group field: a RadioSelect handles display and keyboard interaction while an embedded hidden <input> carries the form submission.

      Basic usage

      Compared with RadioSelect: name is not written on each radio (exclusivity is guaranteed by the controlled state), and the component always has a selection — a value not among the selectable options falls back to the first selectable one, matching the "always one selected" semantics of HTML radio forms.

      Current: email; submitted: 
      import { useState } from "react";
import { ButtonInput, FormLayout, RadioSelectInput } from "ooui-react";

function App() {
  const [notify, setNotify] = useState<string | number>("email");
  const [submitted, setSubmitted] = useState("");

  return (
    <FormLayout
      onSubmit={(event) => {
        event.preventDefault();
        setSubmitted(new FormData(event.currentTarget).get("notify")?.toString() ?? "");
      }}
    >
      <RadioSelectInput
        name="notify"
        value={notify}
        onChange={setNotify}
        options={[
          { value: "email", children: "Email" },
          { value: "sms", children: "SMS" },
          { value: "none", children: "No notifications" },
        ]}
      />
      <ButtonInput type="submit">Submit</ButtonInput>
      <div>Current: {String(notify)}; submitted: {submitted}</div>
    </FormLayout>
  );
}

export default App;

      Invalid-value fallback: in the example below the initial fax is not among the options, so it falls back to the first selectable one ("Email") and submits email as usual:

      Submitted: (not submitted)
      import { useState } from "react";
import { ButtonInput, FormLayout, RadioSelectInput } from "ooui-react";

function App() {
  const [submitted, setSubmitted] = useState("");

  return (
    <FormLayout
      onSubmit={(event) => {
        event.preventDefault();
        setSubmitted(new FormData(event.currentTarget).get("notify")?.toString() ?? "");
      }}
    >
      <RadioSelectInput
        name="notify"
        defaultValue="fax"
        options={[
          { value: "email", children: "Email" },
          { value: "sms", children: "Text message" },
          { value: "none", children: "Don't notify" },
        ]}
      />
      <ButtonInput type="submit">Submit</ButtonInput>
      <div>Submitted: {submitted || "(not submitted)"}</div>
    </FormLayout>
  );
}

export default App;

      API

      PropDescriptionTypeDefault
      optionsThe option set; each item has value and children (the option text), disabled supportedRadioSelectInputOptionProps[]—
      valueCurrent value (controlled; passing it enables controlled mode)string | number—
      defaultValueInitial value for uncontrolled usestring | number—
      onChangeValue change callback (the second argument is the radio's native change event, carried on click reselection; keyboard reselection and the focus auto-select update silently, matching the original, with no event)ChangeHandler<string | number, HTMLInputElement>—
      nameForm field name (written to the hidden input only)string—
      disabledWhether disabled (the hidden input is disabled too, dropping out of submission)booleanfalse
      tabIndexForwarded to the inner RadioSelect's rootnumber—
      ...restNative div props passed straight to the rootHTMLAttributes<HTMLDivElement>—

      The original forwards only data and label when building options, silently dropping options[].disabled; this implementation honors disabled as declared, matching CheckboxMultiselectInput and DropdownInput.

      See also