@thumbtack/tp-ui-react-checkbox v3.1.6
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 anid
. Thisid
is then passed as the second argument toonChange
. 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 theid
exists withinthis.state
and istrue
.
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>