Form Checkbox

The FormCheckbox component is a wrapper over Bootstrap's custom checkbox component.

Basic Checkbox

Select your favorite fruits:

OrangeLemonKiwiSelected fruits:

{"orange":false,"lemon":false,"kiwi":false}

import React from "react";
import { FormCheckbox } from "shards-react";

export default class FormCheckboxExample extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
    this.state = {
      orange: false,
      lemon: false,
      kiwi: false
    };
  }

  handleChange(e, fruit) {
    const newState = {};
    newState[fruit] = !this.state[fruit];
    this.setState({ ...this.state, ...newState });
  }

  render() {
    return (
      <div>
        <p>Select your favorite fruits:</p>
        <FormCheckbox
          checked={this.state.orange}
          onChange={e => this.handleChange(e, "orange")}
        >
          Orange
        </FormCheckbox>
        <FormCheckbox
          checked={this.state.lemon}
          onChange={e => this.handleChange(e, "lemon")}
        >
          Lemon
        </FormCheckbox>
        <FormCheckbox
          checked={this.state.kiwi}
          onChange={e => this.handleChange(e, "kiwi")}
        >
          Kiwi
        </FormCheckbox>
        <span className="d-block mt-3">
          <strong>Selected fruits:</strong>{" "}
          <pre>{JSON.stringify(this.state)}</pre>
        </span>
      </div>
    );
  }
}

Basic Toggles

Checkboxes can be turned into toggles by using the toggle prop.

🚀 Enable Rockets

import React from "react";
import { FormCheckbox } from "shards-react";

class BasicToggleExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.setState({
      checked: !this.state.checked
    });
  }

  render() {
    return (
      <FormCheckbox
        toggle
        checked={this.state.checked}
        onChange={this.handleChange}>
        🚀 Enable Rockets
      </FormCheckbox>
    );
  }
}

export default BasicToggleExample;

Small Toggles

A toggle's size can be adjusted using the small prop.

🚀 Enable (small) Rockets

import React from "react";
import { FormCheckbox } from "shards-react";

class SmallToggleExamples extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.setState({
      checked: !this.state.checked
    });
  }

  render() {
    return (
      <FormCheckbox
        toggle
        small
        checked={this.state.checked}
        onChange={this.handleChange}>
        🚀 Enable (small) Rockets
      </FormCheckbox>
    );
  }
}

export default SmallToggleExamples;

Inline Display

Checkboxes can also be displayed inline using the inline prop.

Select your favorite fruits:

BasketballFootballTennis

import React from "react";
import { FormCheckbox } from "shards-react";

export default class InlineCheckboxes extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      basketball: false,
      football: false,
      tennis: false
    };
  }

  handleChange(e, fruit) {
    const newState = {};
    newState[fruit] = !this.state[fruit];
    this.setState({ ...this.state, ...newState });
  }

  render() {
    return (
      <div>
        <p>Select your favorite fruits:</p>
        <FormCheckbox
          inline
          checked={this.state.basketball}
          onChange={e => this.handleChange(e, "basketball")}
        >
          Basketball
        </FormCheckbox>
        <FormCheckbox
          inline
          checked={this.state.football}
          onChange={e => this.handleChange(e, "football")}
        >
          Football
        </FormCheckbox>
        <FormCheckbox
          inline
          checked={this.state.tennis}
          onChange={e => this.handleChange(e, "tennis")}
        >
          Tennis
        </FormCheckbox>
      </div>
    );
  }
}

Props

The following props are available for the Form Checkbox component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Node`	-	No
inline	Whether it is inline, or not.	`Bool`	-	No
valid	Whether it is valid, or not.	`Bool`	-	No
invalid	Whether it is invalid, or not.	`Bool`	-	No
toggle	Whether it is a toggle button, or not.	`Bool`	-	No
small	Whether it is small (toggle), or not.	`Bool`	-	No
onChange	The onChange handler.	`Func`	`() => {}`	No
innerRef	The inner ref.	`ObjectFuncString`	-	No