> 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.
# CheckboxInput
> [Source](https://github.com/BearBin1215/ooui-react/tree/main/src/widgets/CheckboxInput) | [Original component](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.CheckboxInputWidget.html "OO.ui.CheckboxInputWidget")
A single checkbox. It has no text label of its own — when you need one, wrap it in [FieldLayout](/ooui-react/en/components/field-layout/index.md).
## Basic usage
The checked state uses the `checked` / `defaultChecked` / `onChange` channels; the first argument of `onChange` is the new checked boolean.
```tsx preview
import { useState } from "react";
import { CheckboxInput } from "ooui-react";
function App() {
const [checked, setChecked] = useState(false);
return (
);
}
export default App;
```
## Indeterminate state
`indeterminate` means "partially selected" — visually a dash rather than a check. It is independent of the checked state and is commonly used on a "select all" box to show that some, not all, children are selected.
```tsx preview
import { CheckboxInput } from "ooui-react";
function App() {
return (
);
}
export default App;
```
The standard wiring of a "select all" box: its checked and indeterminate states are both **derived** from the children set (none → unchecked, all → checked, otherwise indeterminate), and clicking it sets all children to checked or unchecked:
```tsx preview
import { useState } from "react";
import { CheckboxInput } from "ooui-react";
const ITEMS = ["Apple", "Banana", "Orange"];
function App() {
const [picked, setPicked] = useState(["Apple"]);
const allChecked = picked.length === ITEMS.length;
return (
{ITEMS.map((item) => (
))}
);
}
export default App;
```
## Form submission value
`value` is the **form submission value** (written to the native ``'s `value` attribute, defaulting to an empty string). It **does not affect the checked state** — that is driven only by the `checked` channels. Combined with `name`, this `value` is submitted with the form when checked.
```tsx preview
import { CheckboxInput } from "ooui-react";
function App() {
return (
);
}
export default App;
```
## Using it with FieldLayout
The field's text label is usually delegated to [FieldLayout](/ooui-react/en/components/field-layout/index.md). It automatically associates the label with this checkbox's native `` (clicking the label toggles the check); to specify the association target manually, give the input element's id via `inputId`.
```tsx preview
import { CheckboxInput, FieldLayout } from "ooui-react";
function App() {
return (
);
}
export default App;
```
## Disabled
`disabled` outputs `aria-disabled` and disables the native ``, so the checkbox can no longer be toggled. Inside a native `