Components

Checkbox(React)

Boxes for checking and unchecking multiple values in forms.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
Import:import { Checkbox } from '@thumbtack/thumbprint-react';

Basic checkbox

Checkboxes can be checked, unchecked, or in an indeterminate state.

The isChecked prop determines if a checkbox is checked.

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

        this.state = {
            isChecked: undefined,
        };

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

    onChange(isChecked) {
        this.setState({
            isChecked,
        });
    }

    render() {
        const { isChecked } = this.state;

        return (
            <Checkbox isChecked={isChecked} onChange={this.onChange}>
                Send me promotional emails
            </Checkbox>
        );
    }
}

Multiple checkboxes

This an example of how to use many Checkbox components at once.

Here are a few points to note:

  • Each Checkbox receives an id. This id is then passed as the second argument to onChange. The first argument is whether the checkbox should be checked or unchecked.
  • The checked checkboxes are stored within this.state.
  • isChecked checks to see if the id exists within this.state and is true.
class CheckboxExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            morning: true,
            afternoon: true,
        };

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

    onChange(isChecked, newValue) {
        this.setState({
            [newValue]: isChecked,
        });
    }

    render() {
        return (
            <div>
                <Checkbox
                    id="morning"
                    isChecked={this.state['morning']}
                    name="example-full"
                    labelPadding="4px 0"
                    onChange={this.onChange}
                >
                    Morning
                </Checkbox>
                <Checkbox
                    id="afternoon"
                    isChecked={this.state['afternoon']}
                    name="example-full"
                    labelPadding="4px 0"
                    onChange={this.onChange}
                >
                    Afternoon
                </Checkbox>
                <Checkbox
                    id="evening"
                    isChecked={this.state['evening']}
                    name="example-full"
                    labelPadding="4px 0"
                    onChange={this.onChange}
                >
                    Evening
                </Checkbox>
            </div>
        );
    }
}

Indeterminate checkboxes

Indeterminate checkboxes are used when not all items in a field are selected.

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

        this.state = {
            isChecked: undefined,
        };

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

    onChange(isChecked) {
        this.setState({
            isChecked,
        });
    }

    render() {
        const { isChecked } = this.state;

        return (
            <Checkbox
                isIndeterminate={isChecked === undefined}
                isChecked={isChecked}
                onChange={this.onChange}
            >
                Select all cities
            </Checkbox>
        );
    }
}

Disabled checkboxes

The isDisabled prop visually and functionally disabled the radio button. It also visually disables the related label.

<React.Fragment>
    <Checkbox isDisabled isChecked onChange={() => {}} labelPadding="4px 0">
        Morning
    </Checkbox>
    <Checkbox isDisabled isChecked onChange={() => {}} labelPadding="4px 0">
        Afternoon
    </Checkbox>
    <Checkbox isDisabled onChange={() => {}} labelPadding="4px 0">
        Evening
    </Checkbox>
</React.Fragment>

Checkbox with an error

The hasError prop can be used to visually represent an error.

This prop only changes the checkbox’s color. It should be used alongside an error message that helps users advance through the form.

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

        this.state = {
            isChecked: undefined,
        };

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

    onChange(isChecked) {
        this.setState({
            isChecked,
        });
    }

    render() {
        const { isChecked } = this.state;

        return (
            <Checkbox isChecked={isChecked} hasError onChange={this.onChange}>
                I accept the Terms of Service
            </Checkbox>
        );
    }
}

Multi-column content

It’s possible to provide complex UIs to the children prop. Clicking on the content will select the related checkbox.

This example puts the label content within children. It’s also possible to not provide children as undefined and use a custom label instead. In that case, you must use Checkbox’s id prop.

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

        this.state = {
            isChecked: undefined,
        };

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

    onChange(isChecked) {
        this.setState({
            isChecked,
        });
    }

    render() {
        const { isChecked } = this.state;

        return (
            <Checkbox isChecked={isChecked} onChange={this.onChange}>
                <div style={{ display: 'flex' }}>
                    <div style={{ flex: 'none' }}>
                        <Avatar imageUrl="https://randomuser.me/api/portraits/women/63.jpg" />
                    </div>
                    <div
                        style={{
                            paddingLeft: '16px',
                            display: 'flex',
                            alignItems: 'center',
                            flex: '1 0 0%',
                        }}
                    >
                        <div>
                            <span style={{ fontWeight: 700 }}>Austin Entertainment LLC.</span>
                            <p>DJs, photo booths, and photography for all of your event needs.</p>
                        </div>
                        <div style={{ fontWeight: 700, marginLeft: 'auto' }}>$120/hr</div>
                    </div>
                </div>
            </Checkbox>
        );
    }
}

Props

Checkbox

  • isDisabled

    Disables the input and the label.

    Type
    bool
    Default
    false
  • isChecked

    Determines if the checkbox is checked.

    Type
    bool
    Default
    false
  • hasError

    Makes the radio and text color red.

    Type
    bool
    Default
    false
  • children

    Text or elements that appear within the label. If children is not provided, the developer must use the Radio’s id prop to associate it with a custom <label> element.

    Type
    node
    Default
    null
  • id

    The id is added to the checkbox as an HTML attribute and passed to the onChange function.

    Type
    string
    Default
    null
  • name

    Checkboxes on a page with the same name will be grouped together when sent to the server. The browser will only send the value of checkboxes that are checked.

    Type
    string
    Default
    null
  • labelPadding

    Determine that padding that gets applied to the label. This can be used to increase the label’s click target. The value supplied should be a string with a unit such as 8px or 8px 16px.

    Type
    string
    Default
    '14px 0'
  • onChange
    required

    Function that runs when a checkbox value changes. It receives the new boolean value and the provided id as such: props.onChange(e.target.checked, props.id).

    Type
    func
  • isIndeterminate

    Shows a horizontal line to represent an indeterminate input.

    Type
    bool
    Default
    false
  • dataTest

    A selector hook into the React component for use in automated testing environments. It is applied internally to the <input /> element.

    Type
    string
    Default
    undefined