# KendoReact Checkbox Overview

The KendoReact Checkbox lets the user toggle between checked, unchecked and the optional indeterminate states.

The Checkbox is designed to replace the `<input type="checkbox">` HTML5 tag and provides the KendoReact specific styling.

<CtaPanelOverview></CtaPanelOverview>

The CheckBox is typically used to represent boolean values via a binary checked state. All regular [`input type="checkbox"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) HTML attributes are applicable.

The KendoReact Checkbox component is part of the KendoReact library of React UI components. It is distributed through NPM under the [kendo-react-inputs package](https://www.npmjs.com/package/@progress/kendo-react-inputs).

The following example demonstrates the Checkbox component in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/checkbox/main/func/source.txt)

## Size

The Checkbox supports `small`, `medium`, and `large` sizes, controlled via the [`size`](https://www.telerik.com/kendo-react-ui/components/inputs/api/checkboxprops#size) property. The default size is `medium`.

The following example demonstrates the available `size` options for the Checkbox.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/checkbox/main/size/source.txt)

## Border Radius

The Checkbox supports `small`, `medium`, `large`, and `none` border radius values, controlled via the [`rounded`](https://www.telerik.com/kendo-react-ui/components/inputs/api/checkboxprops#rounded) property. The default value is `medium`.

The following example demonstrates the available `rounded` options for the Checkbox.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/checkbox/main/border-radius/source.txt)

## Indeterminate State

The Checkbox supports an indeterminate state in addition to the standard checked and unchecked states. Set `value` to `null` to render the Checkbox in an indeterminate state.

The following example demonstrates the Checkbox in its indeterminate and checked states.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/checkbox/main/indeterminate/source.txt)

> The Checkbox is part of the [KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs) component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Checkbox and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/get-started) guide.

## Key Features

* [Disabled Checkbox](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/disabled)—You can render a disabled Checkbox by setting a single property and keep it disabled until certain requirements are met.
* [Controlled mode](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/controlled)—You can take advantage of the built-in options that allow you to control the value and the checked state of the Checkbox.
* [Default state](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/default-state)—To control the initial value of the Checkbox, you can use the `defaultChecked` property.
* [Labels](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/labels)—You can add labels and set their position. The Checkbox supports custom labels as well.
* [Forms support](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/forms-support)—You can easily integrate the Checkbox with an [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), the [`KendoReact Form component`](https://www.telerik.com/kendo-react-ui/components/form), or a third-party React form library.
* [Globalization](https://www.telerik.com/kendo-react-ui/components/inputs/globalization)—The KendoReact Checkbox comes with globalization features that allow you to create applications that can be used all over the world.
* [Keyboard navigation](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/keyboard-navigation)—The Checkbox supports numerous keyboard shortcuts that allow users to interact with the component.
* [Accessibility](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/accessibility/wai-aria-support)—The Checkbox is accessible for screen readers and provides full WAI-ARIA support.

> To learn more about the appearance, anatomy, and accessibility of the CheckBox, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/checkbox/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

## Suggested Links

* [Getting Started with the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/get-started)
* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/)
* [API Reference of the Checkbox](https://www.telerik.com/kendo-react-ui/components/inputs/api/checkbox)