- 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-2z
Import 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 install
npm run dev
npm run start
MIT