- You can customize icon, theme or color for Checkbox/Radio
- Single option
- It is not
react-radio-checkbox-z
npm install --save react-radio-checkbox-2zImport the module in the place you want to use:
import RadioOrCbx from "react-radio-checkbox-2z"; const [value, setValue] = useState('label1') // radio
// const [value, setValue] = useState(['label1']) // radio || checkbox
<RadioOrCbx optionLabel='abcd1' optionValue='ab1' value={value} onChange={setValue} />
<RadioOrCbx optionLabel='abcd2' optionValue='ab2' value={value} onChange={setValue} />
// Customize label
<RadioOrCbx optionValue='ds2' value={value} onChange={setValue}>Label</RadioOrCbx>| props | type | description |
|---|---|---|
| id | String | |
| theme | String | default: tick
|
| className | String | css |
| disabled | boolean | |
| boxSize | number | default: 16 |
| typeCheckbox | boolean | default: false (it is radio) |
| floatRight | boolean | default: false (Check in left) |
| isRect | boolean | default: false (Checkbox is circle) |
| groupName | String | groupName of radio/checkbox |
| selectColor | String | default #4169E1 (color when checked) |
| unSelectColor | String | default #cbd1d8 (color when unchecked) |
| hoverColor | String | default use selectColor (Color when hover) |
| tabFocusColor | String | default #000000. Box shadow color when focus |
| tickColor | String | Color of tick when check. |
| checkedIcon | Customize icon. (Change your icon checked) | |
| optionLabel | Display label text | |
| optionValue | Value option (string or number) |
|
| value | Single, Array | Current selected value |
| onChange | func | Event change |
...props |
any | Prop of input. (It's not necessary) |
Theme 'fill', 'in', 'out', 'tick', 'tick-fill', 'tick-fill-in', 'x', 'x-fill', 'x-fill-in'
A working example can be found in the example directory.
npm installnpm run dev
npm run startMIT