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


ComponentsAvatar GroupButtonsCard TabsCheckboxesColorsDropdownsGlobeHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source