Checkbox Component

The Checkbox component allows users to select one or multiple options from a list, providing a visual representation of a binary choice with states like checked, unchecked, or indeterminate.

Usage

To import and use the Checkbox component in your application, use the following code snippet:

import { Checkbox } from "@syncfusion/react-buttons";

<Checkbox checked={true} label="Accept Terms and Conditions" />

import { Checkbox } from "@syncfusion/react-buttons";

<Checkbox checked={true} label="Accept Terms and Conditions" />

Demos

Explore the demos of the React Checkbox component. Refer to this page.

Props

The following table outlines the props for the Checkbox component:

Name	Type	Default	Description
checked	boolean	false	Specifies a value that indicates whether the Checkbox is `checked` or not. When set to `true`, the Checkbox will be in `checked` state.
checkedIcon	node	-	Specifies a custom icon to be displayed in checked state. This replaces the default Checkbox check mark.
color	Color	Color.Primary	Specifies the Color style of the button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error', and 'Info'.
defaultChecked	boolean	false	Specifies the initial checked state of the Checkbox. Use for uncontrolled components.
icon	node	-	Specifies a custom icon to be displayed in unchecked state. This replaces the default Checkbox appearance.
indeterminate	boolean	false	Specifies if the Checkbox is in an `indeterminate` state, which visually presents it as neither checked nor unchecked; setting this to `true` will make the Checkbox appear in an indeterminate state.
indeterminateIcon	node	-	Specifies a custom icon to be displayed in the indeterminate state. This replaces the default indeterminate icon.
label	string	-	Defines the text label for the Checkbox component, helping users understand its purpose.
labelPlacement	Position	Position.Right	Specifies the position of the label relative to the Checkbox. It determines whether the label appears before or after the Checkbox element in the UI.
size	Size	Size.Medium	Specifies the size style of the Checkbox. Options include 'Small', 'Medium' and 'Large'.
value	string	-	Defines `value` attribute for the Checkbox. It is a form data passed to the server when submitting the form.

Events

The following table outlines the events for the Checkbox component:

Name	Type	Description
onChange	(event: CheckboxChangeEvent) => void	Triggers when the Checkbox state has been changed by user interaction, allowing custom logic to be executed in response to the state change.