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.
class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            value: true
        }
    }

    handleChange = event => this.setState({ value: event.value });

    render() {
        return (
            <Checkbox value={this.state.value} onChange={this.handleChange} label={'Controlled value'} />
        );
    }

}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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.
class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            checked: true
        }
    }

    handleChange = event => this.setState({ checked: event.value });

    render() {
        return (
            <Checkbox checked={this.state.checked} onChange={this.handleChange} label={'Controlled checked'} />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);