thumbtackpackage: '@thumbtack/tp-ui-react-radio' kit: element/radio.yaml platform: react
url: /api/components/element/radio/react/
Basic radio buttons
The isChecked prop determines when this controlled component is checked.
<Radio isChecked name="example-basic" onChange={() => {}}>
Long Distance Moving
</Radio>Complete example that manages state
This an example of how to use many Radio components at once.
Here are a few points to note:
- Each
Radioreceives anid. Thisidis then passed as the second argument toonChange. - The selected radio button is stored in
this.state. isCheckedperforms a comparison to see if theidmatches the value inthis.state.selected.
class RadioExample extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: 'long-distance',
};
this.onChange = this.onChange.bind(this);
}
onChange(isChecked, newValue) {
this.setState({
selected: isChecked ? newValue : null,
});
}
render() {
return (
<div>
<Radio
id="long-distance"
isChecked={this.state.selected === 'long-distance'}
name="example-full"
labelPadding="4px 0"
onChange={this.onChange}
>
Long Distance Moving
</Radio>
<Radio
id="furniture-moving"
isChecked={this.state.selected === 'furniture-moving'}
name="example-full"
labelPadding="4px 0"
onChange={this.onChange}
>
Furniture Moving and Heavy Lifting
</Radio>
<Radio
id="pool-table"
isChecked={this.state.selected === 'pool-table'}
name="example-full"
labelPadding="4px 0"
onChange={this.onChange}
>
Pool Table Moving
</Radio>
</div>
);
}
}Disabled radio buttons
The isDisabled prop visually and functionally disabled the radio button. It also visually disables the related label.
`jsx theme=white
<React.Fragment>
<Radio isDisabled isChecked name="example-disabled" onChange={() => {}} labelPadding="4px 0">
Long Distance Moving
</Radio>
<Radio
isDisabled
isChecked={false}
name="example-disabled"
onChange={() => {}}
labelPadding="4px 0"
>
Furniture Moving and Heavy Lifting
</Radio>
<Radio
isDisabled
isChecked={false}
name="example-disabled"
onChange={() => {}}
labelPadding="4px 0"
>
Pool Table Moving
</Radio>
</React.Fragment>
## Radio button with an error
The `hasError` prop can be used to visually represent an error.
This prop only changes the radio button’s color. It should be used alongside an error message that helps users advance through the form.
```jsx
<Radio hasError name="example-error" onChange={() => {}}>
Long Distance Moving
</Radio>Multi-column content
It’s possible to provide complex UIs to the children prop. Clicking on the content will select the related radio button.
<Radio isChecked={false} name="example-multi-column-content" 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>
</Radio>