@thumbtack/tp-ui-react-radio v3.1.6

package: '@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 Radio receives an id. This id is then passed as the second argument to onChange.
• The selected radio button is stored in this.state.
• isChecked performs a comparison to see if the id matches the value in this.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.

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

<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>