You can customize icon, theme or color for Checkbox/Radio
Install the package
npm install --save react-radio-checkbox-z
Import the module in the place you want to use:
import RadioCheckBox from "react-radio-checkbox-z";
const [value, setValue] = useState('label1') // radio
// const [value, setValue] = useState(['label1']) // radio || checkbox
const [options, setOptions] = useState([
{ label: 'label1', value:'label1' },
'label2',
'label3',
// ...more,
// { label, value, disabled, className: 'itemClass', labelClassName: 'labelClass' },
])
// don't check duplicate value in options, so please pass unique value
<RadioCheckBox
options={options}
value={value} // array or string
onChange={setValue} // event
theme="tick" // see props
// more =>
// groupName="item-group-template" // default random unique
// height="30" // min-height option
// boxSize="16" // box-size 16 x 16
// className={className}
// disabled={true} // disabled all
// checkBox={true} // input="checkbox"
// displayBox={true} // display like checkbox
// vertical={true} // display vertical
// selectColor="any" // color when selected
// unSelectColor="any" // color when no selected
// hoverColor=any // color when hover (default like selectColor)
// tickColor="any" // only theme (type `tick/x`)
// tabFocusColor // keypress tab (shawdow box: #000)
// checkedIcon // custom icon
// (Box size is affected by: `box-sizing: border-box`)
/>
The following props are accepted:
Selected value.
Update value
groupName of radio/checkbox. Default (random) unique of RadioCheckBox
if you want to use multiple RadioCheckBox(same name), you can set the group name
<RadioCheckBox groupName="groupabc" theme="in" ... />
<RadioCheckBox groupName="groupabc" theme="fill" ... />
list data like. [Object, String, ...]
[
{
label: 'Display', value: 'value', disabled: false, // disabled option
className: 'itemClass', labelClassName: 'labelClass'
jsx // in case you want to change the label to a complex element,
checkedIcon // it is url or exact icon (SEE LIVE EXAMPLE)
},
...,
'value' // => make option { label: value, value: value }
// ex: [ { value: '1', disabled: true, jsx: <span>xyzmrer....</span> }... ]
]
Disabled all options. Default false
Type is checkbox. Default false
(radio)
Show check mark icon like a checkbox. Default false
(radio)
Display vertical true
. Defaut false
// default (nothing) of html
in: [
'fill', 'in', 'out',
'tick', 'tick-fill', 'tick-fill-in',
'x', 'x-fill', 'x-fill-in'
]
color when checked. Default [#4169E1]
color when unchecked. Default [#cbd1d8]
color when hover. Default using (selectColor)
Use when theme
type = tick..
|| x..
Color of tick when check.
box shadow color when focus by tab. (#000
)
min-height of line-options. (default: 24px
)
size of check. (default: 16px
)
The className added to group.
customize checked icon (see live example)
You should refrain from using this method.
You can override css to see custom tick.
/* set your className(.itemClass) for selector unique */
.itemClass.ldk-rc-radio-checkbox .rc-option-checked .rc-option-icon {
background: url('./cal-blue.png') no-repeat center;
}
.itemClass.ldk-rc-radio-checkbox .rc-option-checked .rc-option-icon::before {
content: '' !important;
}
The style added to group.
A working example can be found in the example
directory.
npm install
npm run dev
npm run start
MIT