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
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source