Checkboxes View Source



The Checkbox component is used in forms when a users needs to select a true or false value.



Imports



Import React and the CheckBox Component.


0
import * as React from "react";
1
import { CheckBox } from "slate-react-system";


Usage



Declare the CheckBox component. Any children will be rendered as the label to the right of the checkbox.

0
class ExampleOne extends React.Component {
1
  state = { exampleOne: false };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <CheckBox
8
        name="exampleOne"
9
        value={this.state.exampleOne}
10
        onChange={this._handleChange}
11
      >
12
        <strong>Unchecked</strong>
13
        <br />
14
        This CheckBox default is unchecked.
15
      </CheckBox>
16
    );
17
  }
18
}
19
20
class ExampleTwo extends React.Component {
21
  state = { ExampleTwo: true };
22
23
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
24
25
  render() {
26
    return (
27
      <CheckBox
28
        name="ExampleTwo"
29
        value={this.state.ExampleTwo}
30
        onChange={this._handleChange}
31
      >
32
        <strong>Checked</strong>
33
        <br />
34
        This CheckBox default is checked.
35
      </CheckBox>
36
    );
37
  }
38
}


Output








Accepted React Properties



Checkboxes
NameTypeDefaultDescription
onChange
function
null
Function called upon an onChange event
value
boolean
false
The value of the checkbox. Can be used to assign default values as well
name
string
null
Input name


Components
Avatar GroupButtonsCard Tabs3D CardCheckboxesColorsDropdownsHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source