@trendmicro/react-radio v4.0.0-alpha

react-radio

React Radio

Demo: https://trendmicro-frontend.github.io/react-radio

Installation

1. Install the latest version of react and react-radio:

   npm install --save react @trendmicro/react-radio

2. At this point you can import @trendmicro/react-radio and its styles in your application as follows:

   import { RadioButton, RadioGroup } from '@trendmicro/react-radio';
   
   // Be sure to include styles at some point, probably during your bootstraping
   import '@trendmicro/react-radio/dist/react-radio.css';

Usage

RadioButton

<RadioButton>RadioButton label</RadioButton>

You can use children to pass through the component.

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

Or pass tag to customize the wrapper component.

<RadioButton tag='span'>
    Lorem ipsum dolor sit amet...
</RadioButton>

Uncontrolled RadioButton

// Default checked
<RadioButton defaultChecked />

Controlled RadioButton

// Checked
<RadioButton checked />

RadioGroup

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

Prevent onChange Propagation

You may need to use event.stopPropagation() to stop onChange propagation when wrapping an input element inside the RadioGroup or RadioButton component.

<RadioGroup
    name="radiogroup"
    value={this.state.value}
    onChange={(event) => {
        const value = event.target.value;
        this.setState({ value: value });
    }}
>
    <RadioButton value="one">
        <span>First option</span>
        <div style={{ marginLeft: 22 }}>
            <input
                type="text"
                onChange={(event) => {
                    // Prevent onChange propagation
                    event.stopPropagation();
                }}
            />
        </div>
    </RadioButton>
    <RadioButton value="two">
        <span>Second option</span>
        <div style={{ marginLeft: 22 }}>
            <input
                type="text"
                onChange={(event) => {
                    // Prevent onChange propagation
                    event.stopPropagation();
                }}
            />
        </div>
    </RadioButton>
</RadioGroup>

API

Properties

RadioButton

RadioGroup

Class Properties

RadioButton

Use the ref property to get a reference to radio button:

const ref = React.createRef();
<RadioButton ref={ref} />

License

MIT