v4.0.0-alpha

Refresh dist files and docs

v3.2.2

• Fixed radio inside would not fit with outside under some resolution (f38584d)
• Use react-styleguidist to create demo page (9eb896d, 7159f3e)

v3.2.1

Address an issue where checking element type for imported components is not possible with projects using react-hot-loader (aa937b6)

v3.2.0

Add a "depth" prop to limit the recursion depth when rendering radio buttons deeply inside a radio group (6750fe8)

Example

<RadioGroup
    name="comic"
    value={this.state.value}
    depth={3} // This is needed to minimize the recursion overhead
    onChange={(value, event) => {
        this.setState({ value: value });
    }}
>
    <div className="row">
        <div className="col-xs-12 col-sm-6">
            <RadioButton label="Batman (DC)" value="dc:batman" />
            <RadioButton label="Hulk (Marvel)" value="marvel:hulk" />
        </div>
        <div className="col-xs-12 col-sm-6">
            <RadioButton label="Superman (DC)" value="dc:superman" />
            <RadioButton label="Spider-Man (Marvel)" value="marvel:spiderman" disabled />
        </div>
    </div>
</RadioGroup>

v3.1.3

Use "pointer-events: none" for the control indicator (b5be336)

v3.1.2

RadioGroup can be an uncontrolled component when not passing the "value" prop (7f8ef2d)

v3.1.1

Fixed an bug where RadioButton's onChange() will not be called when wrapping with RadioGroup (3a702b7)

v3.1.0

• Fixed an issue where the render function will always map object to array (eec9254)
• Removed className and style props from RadioGroup since it will no longer wrap children with a <div/> element.

v3.0.0

Breaking

• Renamed react-radio-button to react-radio

What's New

• Adds RadioGroup component

<RadioGroup
    name="comic"
    value={this.state.value}
    onChange={(value, event) => {
        this.setState({ value: value });
    }}
>
    <div className="row">
        <div className="col-xs-12 col-sm-6">
            <RadioButton label="Batman (DC)" value="dc:batman" />
            <RadioButton label="Hulk (Marvel)" value="marvel:hulk" />
        </div>
        <div className="col-xs-12 col-sm-6">
            <RadioButton label="Superman (DC)" value="dc:superman" />
            <RadioButton label="Spider-Man (Marvel)" value="marvel:spiderman" disabled />
        </div>
    </div>
</RadioGroup>

v2.0.0

Refactors RadioButton component that attaches text label next to the radio button

Usage

<RadioButton label="RadioButton label" />

The label prop is optional, you can use children to pass through the component.

<RadioButton label="RadioButton label">
    <p style={{ marginLeft: 24 }}>
        Lorem ipsum dolor sit amet...
    </p>
</RadioButton>

<RadioButton>
    <span style={{ verticalAlign: 'middle', marginLeft: 8 }}>
        Lorem ipsum dolor sit amet...
    </span>
</RadioButton>

Uncontrolled RadioButton

// Default checked
<RadioButton defaultChecked />

Controlled RadioButton

// Checked
<RadioButton checked />