1.2.2 • Published 6 years ago

react-radio-buttons v1.2.2

Weekly downloads
3,072
License
MIT
Repository
github
Last release
6 years ago

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

namedescription
onChangecalled when select child RadioButton
valueinitial selected value, omit for no selection and set to '' for first enabled control
horizontalwhether to align horizontally
childrendefine your RadioButtons

RadioButton

namedescription
iconSizesize of RadioIcon, which appears on the right side of button
iconInnerSizesize of RadioIcon's inner icon when selected, proper value is same as iconSize or half of iconSize
paddingpadding size
rootColorcolor when unselected
pointColorcolor when selected
valuereturn value when selected
childrenprefer string
disabledboolean flag that allows you to disable a certain a button
disabledColorcolor when disabled, including the RadioIcon

Author

InJung Chung / @mu29

License

MIT