Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@thumbtack/tp-ui-react-radio

thumbtack2UNLICENSEDdeprecated3.1.6

This package is deprecated in favor of the '@thumbtack/thumbprint-react' NPM package.

The isChecked prop determines when this controlled component is checked.

readme


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.

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

changelog

Changelog

Unreleased

3.1.6 - 2018-12-03

Changed

  • [Patch] Use a tilde for Sass imports (#1256)

3.1.5 - 2018-12-03

Changed

  • [Patch] Upgrade to latest version of eslint.

3.1.4 - 2018-11-27

Changed

  • [Patch] Publish package to public NPM.

3.1.3 - 2018-10-22

Changed

  • [Patch] Convert to use MDX for documentation. (#1251)

3.1.2 - 2018-10-03

Changed

  • [Patch] Remove defaultProp for name since it is a required prop.

3.1.1 - 2018-09-12

Changed

  • [Patch] Upgrade version of Prettier and Thumbprint Tokens.

3.1.0 - 2018-08-17

Added

  • [Minor] Add support for dataTest prop

3.0.2 - 2018-08-10

Changed

  • [Patch] Use camelCase classes in CSS modules.

3.0.1 - 2018-06-04

Fixed

  • [Patch] Remove styled-components from the list of peer dependencies. (#944)

3.0.0 - 2018-05-18

Changed

  • [Major] Use CSS modules instead of styled-components. (#862)

2.0.4 - 2018-04-19

Changed

  • [Patch] Fix mistake where CommonJS package was published as ES module. (#822)

2.0.3 - 2018-04-16

Changed

  • [Patch] Use latest version of Thumbprint Tokens.

2.0.2 - 2018-04-13

Changed

  • [Patch] Publish package as CommonJS and ES module.

2.0.1 - 2018-03-14

Changed

  • [Patch] Use latest version of Thumbprint Tokens.

2.0.0 - 2017-03-02

Changed

  • [Major] Change height and width from 24px to 20px.

1.0.1 - 2017-02-21

Changed

  • [Patch] Lighten focus state for checked radio buttons.
  • [Patch] Increase left padding from 8px to 12px.

1.0.0 - 2017-02-20

Added

  • [Minor] Add an id prop that is passed as the second argument to onChange.
  • [Minor] Add hasError prop for error states.

Changed

  • [Major] Height and width changed from 20px to 24px.
  • [Major] The name prop is marked as required because it is neccessary for keyboard navigation.

0.6.3 - 2018-02-07

Changed

  • [Patch] Use latest version of Thumbprint Tokens.

0.6.2 - 2018-01-30

Changed

  • [Patch] Add support for styled-components ^3.0.0 to peer dependencies.

0.6.1 - 2018-01-29

Fixed

  • [Patch] Prevent text from overflowing the parent when it is truncated. (#613)

0.6.0 - 2018-01-16

Changed

  • [Minor] Use latest version of Thumbprint Tokens. This includes new brand colors.

0.5.11 - 2018-01-11

Changed

  • [Patch] Update npm latest tag since it was accidentally pointed to a prepublish version of our components.

0.5.10 - 2017-12-11

Changed

  • [Patch] Run babel-plugin-styled-components before publishing component.

0.5.9 - 2017-12-05

Fixed

  • [Patch] Increase size of circle within radio input for consistenct with SCSS. (#495)

0.5.8 - 2017-12-01

Changed

  • [Patch] Make name prop optional to simplify developer experience.

Fixed

  • [Patch] Add focus state. (#469)

0.5.7 - 2017-11-21

Changed

  • [Patch] Rewrite documentation with Gatsby.
  • [Patch] Use Prettier to format files.

0.5.6 - 2017-11-16

Changed

  • [Patch] Change peerDependencies to include React 16.

0.5.5 - 2017-11-01

Changed

  • [Major] Move styled-components from dependencies to peerDependencies.

0.5.4 - 2017-10-31

Changed

  • [Patch] Update @thumbtack/thumbprint-tokens to version 4.0.1.

0.5.3 - 2017-10-13

Changed

  • [Patch] Border color now $tp-color__ui__pale, replacing $tp-color__ui__base as it was too light.

0.5.2 - 2017-10-04

Changed

  • [Patch] Use latest version of thumbprint-tokens.

0.5.1 - 2017-10-02

Fixed

  • [Patch] Change how we import component in Jest to avoid a bizarre Jest bug.

0.5.0 - 2017-08-24

Fixed

  • [Major] Set the default labelPadding to 14px 0 by default. This was supposed to be part of the 0.4.0 release.

0.4.0 - 2017-08-17

Added

  • [Major] Add a labelPadding prop, allowing consumers to change the padding applied to the label element. This is useful in situations where we want to increase the component's click target. Padding is set to 14px 0 by default.

Fixed

  • [Patch] Prevent the input from getting smushed due to flexbox. (#276)

0.3.0 - 2017-08-01

Fixed

  • [Major] Pass event.target.checked instead of event.target.value to the onClick function. (#243)

0.2.2 - 2017-07-21

Fixed

  • [Patch] Accept PropTypes.node, not only strings, as children.
  • [Patch] Vertically center align the input when children are tall.

0.2.1 - 2017-07-18

Changed

  • [Patch] Removing uneeded bottom margin from label text.

0.2.0 - 2017-07-13

Changed

  • [Major] Convert component to a controlled component.

0.1.3 - 2017-07-13

Added

  • [Patch] Add component tests.

Changed

  • [Patch] Update code to conform to ESLint standards.

0.1.1 - 2017-07-12

Fixed

  • [Patch] Fix bug where name prop was not actually getting added to the input.

0.1.1 - 2017-07-10

Fixed

  • [Patch] Add name prop to component.

0.1.0 - 2017-07-10

Added

  • [Minor] Create first version of tp-ui-react-radio.