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 RadioButton s |
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