@thumbtack/tp-ui-react-checkbox

package: '@thumbtack/tp-ui-react-checkbox' kit: element/checkbox.yaml platform: react

url: /api/components/element/checkbox/react/

Basic checkboxes

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

The isChecked prop determines if a checkbox is checked. Clicking on this checkbox does not change the state since isChecked is hard-coded to true.

<Checkbox isChecked onChange={() => {}}>
    Send me promotional emails
</Checkbox>

Complete example that manages state

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.

<Checkbox isIndeterminate 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.

<Checkbox hasError 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.

<Checkbox isChecked={false} 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>