> 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.

# CheckboxMultiselectInput

> [Source](https://github.com/BearBin1215/ooui-react/tree/main/src/widgets/CheckboxMultiselectInput) | [Original component](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.CheckboxMultiselectInputWidget.html "OO.ui.CheckboxMultiselectInputWidget")

A checkbox group field: the form form of [CheckboxMultiselect](/ooui-react/en/components/checkbox-multiselect/index.md) — 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](/ooui-react/en/components/checkbox-multiselect/index.md): array-valued `value` / `defaultValue` / `onChange`.

```tsx preview
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](/ooui-react/en/components/checkbox-multiselect/index.md) (`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

- The interactive checkbox group (Shift+click range selection, etc.): [CheckboxMultiselect](/ooui-react/en/components/checkbox-multiselect/index.md)
- The radio group field: [RadioSelectInput](/ooui-react/en/components/radio-select-input/index.md)
- The form container: [FormLayout](/ooui-react/en/components/form-layout/index.md)