Skip to content

trendmicro-frontend/react-radio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-radio build status Coverage Status

NPM

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
  1. 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