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