Components

Radio(React)

Boxes for checking and unchecking single values in forms.

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

Basic radio button

The isChecked prop determines when this controlled component is checked.

class RadioExample 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 (
            <Radio isChecked={isChecked} name="example-basic" onChange={this.onChange}>
                Long Distance Moving
            </Radio>
        );
    }
}

Multiple radio buttons

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.

class RadioExample 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 (
            <Radio isChecked={isChecked} hasError name="example-error" onChange={this.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.

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 Radio’s id prop.

class RadioExample 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 (
            <Radio
                isChecked={isChecked}
                name="example-multi-column-content"
                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>
            </Radio>
        );
    }
}

Props

Radio

  • isDisabled

    Disable the input and the label.

    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 radio button as an HTML attribute and passed to the onChange function.

    Type
    string
    Default
    null
  • isChecked

    Boolean that determines if the radio is checked.

    Type
    bool
    Default
    false
  • hasError

    Makes the radio and text color red.

    Type
    bool
    Default
    false
  • name
    required

    Radio buttons that have the same name attribute are in the same radio button group. Only one radio in a group can be selected at a time. All of the radio buttons in the group must share a value that is unique to the page. This is required for keyboard navigation.

    Type
    string
  • 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 new radio button is selected. It receives the new boolean value and the provided id as such: props.onChange(e.target.checked, props.id).

    Type
    func
  • 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