Controlled Mode

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.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.
Example
View Source
Edit In Stackblitz  
Change Theme: