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

Name	Type	Default	Description
children	any		Children to pass through the component.
className	Object		Customized class name for the component.
style	Object		Customized style for the component.
checked	Boolean		If true, the radio button will be selected. Transferred from the radio group.
defaultChecked	Boolean		The default checked state of the radio button.
disabled	Boolean	false	If true, the radio button will be shown as disabled and cannot be modified.
tag	Function or String	label	Customized wrapper component to replace label.
id	String		Id for the input field of radio button.
name	String		Name for the input element.
value	any		Value for the radio button.
onChange	Function		Callback function that will be invoked when the value changes.

RadioGroup

Name	Type	Default	Description
children	any		Children to pass through the component.
disabled	Boolean	false	If true, the radio group will be displayed as disabled.
name	String		Name for the input element group.
value	any		The value of the radio group.
defaultValue	any		The default value of the radio group.
onChange	Function		Callback function that will be invoked when the value changes.

Class Properties

RadioButton

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

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

License

MIT