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

      • CheckboxMultiselectInput

      Source | Original component

      A checkbox group field: the form form 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";

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={[
          { value: "apple", children: "Apple" },
          { value: "banana", children: "Banana" },
          { value: "cherry", children: "Cherry" },
        ]}
      />
      <ButtonInput type="submit">Submit</ButtonInput>
      <div>Submitted: {submitted}</div>
    </FormLayout>
  );
}

export default App;

      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