UNPKG

react-radio-buttons

Version:
69 lines (59 loc) 2.01 kB
# 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 <img src="https://raw.githubusercontent.com/mu29/react-radio-button/master/example/example.png" width="400" /> ## 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](https://github.com/mu29/react-radio-buttons/blob/master/example/example.js)) : ``` <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](http://mu29.github.io/) ## License [MIT](./LICENSE)