Checkbox

Checkbox Overview

A Checkbox allows users to select an option by checking a checkbox to state their choice as well as to toggle between a checked, unchecked, and optional indeterminate state. Checkboxes signify non-binary choices or allow the selection of one or more options from a multiple-choice list.

The Checkbox is designed to replace the input type="checkbox" HTML5 tag, and, under the hood, the component enables developers to implement a checkbox functionality for input HTML elements and supports all regular checkbox HTML attributes.

Live Demo

Appearance

Checkboxes provide built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI Checkbox, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI CheckBox can acquire the following states which you can set by using the following classes:

• k-checked—The checked state of a Checkbox indicates that the user has made their selection by checking the respective checkbox.
• The unchecked state of a Checkbox indicates that the user hasn't made any selection yet.
• k-indeterminate—The indeterminate state of the Checkbox is different and independent from its checked state. It enables the developer to display the current checked state of the Checkbox upon user interaction.
• A Checkbox in its normal state appears active, and is usable and clickable.
• k-focus—The focus state is triggered after the Checkbox has been spotlighted with the mouse or the keyboard.
• k-invalid —The invalid state of a Checkbox results from the lack of a required type of input or any input at all.
• k-disabled—The disabled state indicates that a Checkbox is temporarily unclickable because, for example, the page requires additional user input, or something important is missing before users continue to the next step. To indicate that they are unavailable, Checkboxes in their disabled state are usually faded, slightly out of focus, and show a subdued text label.

1. Checked
2. Unchecked
3. Indeterminate

Anatomy

The anatomy of the Checkbox summarizes the elements of the component.

Depending on the elements they display, the Telerik and Kendo UI Checkboxes can be any of the following types:

• Checkboxes with a label (default)—The checkbox label is of equal importance as it clarifies the choice of the user.
• Checkbox without a label—Usually used for selection within more complex components, such as the Grid, where the label is not needed.

1. A checkbox without a label
2. A checkbox followed by a label
3. A checkbox preceded by a label

The next image shows the anatomy of a checked Checkbox and includes the following elements:

1. Checkbox
2. Text label (optional)

Size

The Checkbox provides the size configuration option that enables you to control how big or small the rendered Checkbox will be. Checkboxes also provide options for size customization. By default, the Checkboxes are medium-sized.

size provides the following available options:

• small—Renders a small checkbox of 12x12px. Small checkboxes are used within more complex small-sized components such as small TreeView items.
• medium (default)—Renders a medium checkbox.
• large—Renders a large checkbox of 20x20px. Large checkboxes are used within more complex large-sized components such as large TreeView items.
• none—Does not set a size and allows you to add your own, custom value.

1. Small
2. Medium (default)
3. Large

Border Radius

The Checkbox provides the rounded option that enables you to control how much border radius will apply to the rendered checkbox. Checkboxes also provide options for border-radius customization. By default, the Checkboxes are rendered with a medium border radius.

rounded provides the following available options:

• small—Renders a border radius of 2 px.
• medium (default)—Renders a border radius of 4 px.
• large—Renders a border radius of 6 px.

1. Small
2. Medium (default)
3. Large

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular CheckboxFind more information about the Kendo UI for Angular CheckBox in the official product documentation of the component.

Telerik UI for Blazor CheckboxFind more information about the Telerik UI for Blazor CheckBox in the official product documentation of the component.

Kendo UI for jQuery CheckboxFind more information about the Kendo UI for jQuery CheckBox in the official product documentation of the component.

KendoReact CheckboxFind more information about the KendoReact CheckBox in the official product documentation of the component.

Kendo UI for Vue CheckboxFind more information about the Kendo UI for Vue CheckBox in the official product documentation of the component.

Telerik UI for ASP.NET Core CheckBoxFind more information about the Telerik UI for ASP.NET Core CheckBox component.

Telerik UI for ASP.NET MVC CheckBoxFind more information about the Telerik UI for ASP.NET MVC CheckBox component.