• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

CheckboxProps

Represents the props of the KendoReact Checkbox component. Extends the native input props.

NameTypeDefaultDescription

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

autoFocus?

boolean

Represents the autoFocus HTML attribute that will be applied to the input element of the Checkbox. (Defaults to false)

checked?

"null" | boolean

Sets the checked state of the Checkbox. Set to null to enable the indeterminate state of the Checkbox (see example).

children?

any

The React elements that are passed as children to the rendered component.

className?

string

Sets the className of the wrapping element of the Checkbox.

defaultChecked?

boolean

Sets the default value of checked attribute when used in uncontrolled mode (see example).

defaultValue?

any

The default value of the Checkbox.

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

disabled?

boolean

Sets the disabled state of the Checkbox (see example).

id?

string

Sets the id of the Checkbox.

label?

React.ReactNode

Sets the label of the Checkbox component (see example).

labelClassName?

string

Sets the className of the label element of the Checkbox.

labelOptional?

boolean

Sets the optional text after the label of the Checkbox component.

labelPlacement?

"after" | "before"

Sets the label position of the Checkbox component (see example).

name?

string

Specifies the name property of the input DOM element.

This property is part of the FormComponentProps interface.

onBlur?

(event: CheckboxBlurEvent) => void

The event handler that will be fired when Checkbox is blurred.

onChange?

(event: CheckboxChangeEvent) => void

The event handler that will be fired when the user edits the value.

onFocus?

(event: CheckboxFocusEvent) => void

The event handler that will be fired when Checkbox is focused.

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

rounded?

"null" | "small" | "large" | "medium"

medium

Configures the rounded style of the Checkbox.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a rounded className.

size?

"null" | "small" | "large" | "medium"

medium

Configures the size of the Checkbox.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size className.

tabIndex?

number

Sets the tabIndex property of the Checkbox. Defaults to 0.

valid?

boolean

Overrides the validity state of the component. If valid is set, the required property will be ignored.

This property is part of the FormComponentProps interface.

validationMessage?

string

Controls the form error message of the component. If set to an empty string, no error will be thrown.

This property is part of the FormComponentProps interface.

validityStyles?

boolean

If set to false, no visual representation of the invalid state of the component will be applied.

This property is part of the FormComponentProps interface.

value?

"null" | string | number | boolean | string[]

If the type is different than boolean and the checked property is provided it's passed to the underlying input element. If set to boolean and the checked property is omitted sets the checked state of the Checkbox. Set null to enable the indeterminate state of the Checkbox (see example).