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

      • CheckboxMultiselectInput

      Source | Original component

      A checkbox group field: the form variant of CheckboxMultiselect — display and interaction unchanged, with each option's checkbox carrying name and its own value, so the checked ones submit natively as multiple same-name fields.

      Basic usage

      The value channels match CheckboxMultiselect: array-valued value / defaultValue / onChange.

      Submitted: 
      import { useState } from "react";
import { ButtonInput, CheckboxMultiselectInput, FormLayout } from "ooui-react";

const FRUITS = [
  { value: "apple", children: "Apple" },
  { value: "banana", children: "Banana" },
  { value: "cherry", children: "Cherry" },
];

function App() {
  const [fruits, setFruits] = useState<Array<string | number>>(["apple"]);
  const [submitted, setSubmitted] = useState("");

  return (
    <FormLayout
      onSubmit={(event) => {
        event.preventDefault();
        const values: string[] = [];
        new FormData(event.currentTarget).forEach((value, key) => {
          if (key === "fruits") {
            values.push(String(value));
          }
        });
        setSubmitted(values.join(", ") || "(none checked)");
      }}
    >
      <CheckboxMultiselectInput
        name="fruits"
        value={fruits}
        onChange={setFruits}
        options={FRUITS}
      />
      <ButtonInput type="submit">Submit</ButtonInput>
      <div>Submitted: {submitted}</div>
    </FormLayout>
  );
}

export default App;
      Performance

      The mapped option set is rebuilt only when the options reference changes: pass a stable reference (a module constant or useMemo) in hot paths instead of an inline array literal.

      API

      Inherits all props of CheckboxMultiselect (options / value / defaultValue / onChange / name / disabled, etc.); no new fields.

      Note

      The options' checkbox value is taken over by this component (written with the option's own value for submission), so a value passed via options[].checkboxProps.value is overridden.

      See also