Controlled Mode

Updated on Jun 24, 2026

By default, the Checkbox is in an uncontrolled state.

The Checkbox provides options for controlling the Value and Checked state. It supports setting it's boolean value using either value or checked prop. Note that if you provide both props, the value prop will be passed to the underlying input element.

Controlling the Value

To manage the value of the Checkbox:

1. Use its value property.
2. Handle the onChange event.
3. Pass the new value through the props.

The following example demonstrates how to control the Checkbox value and toggle the task completion state externally via a button.

Change Theme

Theme

Loading ...

Controlling the Checked state

To manage the checked state of the Checkbox:

1. Use its checked property.
2. Handle the onChange event.
3. Pass the new value through the props.

The following example demonstrates how to control the Checkbox checked state to manage a newsletter subscription status.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Checkbox