react-radio-buttons

Well-designed radio buttons for react

Installation

npm install react-radio-buttons --save

Then just add import { RadioGroup, RadioButton } from 'react-radio-buttons'; into your file.

Screenshot

Usage

This is your average radio group:

<form>
  <input type="radio" name="fruit" value="apple" />Apple
  <input type="radio" name="fruit" value="orange" />Orange
  <input type="radio" name="fruit" value="melon" />Melon
</form>

By using react-radio-buttons, you can write like this (full example here) :

<RadioGroup onChange={ this.onChange } horizontal>
  <RadioButton value="apple">
    Apple
  </RadioButton>
  <RadioButton value="orange">
    Orange
  </RadioButton>
  <RadioButton value="melon">
    Melon
  </RadioButton>
  <ReversedRadioButton value="melon">
    Melon
  </ReversedRadioButton>
</RadioGroup>

API

RadioGroup

| name | description | |----------|----------------| |onChange|called when select child RadioButton| |value|initial selected value, omit for no selection and set to '' for first enabled control| |horizontal|whether to align horizontally| |children|define your RadioButtons|

RadioButton

| name | description | |----------|----------------| |iconSize|size of RadioIcon, which appears on the right side of button| |iconInnerSize|size of RadioIcon's inner icon when selected, proper value is same as iconSize or half of iconSize| |padding|padding size| |rootColor|color when unselected| |pointColor|color when selected| |value|return value when selected| |children|prefer string| |disabled|boolean flag that allows you to disable a certain a button| |disabledColor|color when disabled, including the RadioIcon|

Author

InJung Chung / @mu29

License

MIT