You can customize icon, theme or color for Checkbox/Radio

Vue /React/ Svelte

Usage

Install the package

npm install --save vue-radio-checkbox-z

Import the module in the place you want to use:

import RadioCheckBox from "vue-radio-checkbox-z";
Vue.component('RadioCheckBox', RadioCheckBox)

Snippet

options: [
    { label: 'label1', value:'label1' },
    'label2',
    'label3',
    // ...more,
    // { label, value, disabled, className: 'itemClass', labelClassName: 'labelClass',... }
],
value: 'label1' //
// value: ['label1'] // radio || checkbox
 

// don't check duplicate value in options, so please pass unique value
<RadioCheckBox :options="options"
    v-model="value" // array or string
    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

    // (boxSize is affected by: `box-sizing: border-box`)
    -->

Props

The following props are accepted:

value (Array || String)

Selected value.

groupName (String)

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" ... />

options (Array)

list data like. [Object, String, ...]

[
    {
        label: 'Display', value: 'value', disabled: false,  // disabled option
        className: 'itemClass', labelClassName: 'labelClass',
        htmlTemplate, // you chane change display label by htmlTemplate
        checkedIcon // passing custom checked icon
    },
    ...,
    'value' // => make option { label: value, value: value }
]

disabled (boolean)

Disabled all options. Default false

checkBox (boolean)

Type is checkbox. Default false (radio)

displayBox (boolean)

Show check mark icon like a checkbox. Default false (radio)

vertical (boolean)

Display vertical true. Defaut false

theme (String)

    // default (nothing) of html
    in: [
        'fill', 'in', 'out', 
        'tick', 'tick-fill', 'tick-fill-in',
        'x', 'x-fill', 'x-fill-in'
    ]

selectColor (String)

color when checked. Default [#4169E1]

unSelectColor (String)

color when unchecked. Default [#cbd1d8]

hoverColor (String)

color when hover. Default using (selectColor)

tickColor (String)

Use when theme = tick.. || x..

Color of tick when check.

tabFocusColor (String)

box shadow color when focus by tab. (#000)

height (number or number_px)

min-height of line-options. (default: 24px)

boxSize (number or number_px)

size of check. (default: 16px)

className

The className added to group.

checkedIcon

customize checked icon (see live example)

customize icon check (another solution)

You should refrain from using this method.

/* set your className(.itemClass) for selector unique */
.itemClass.ldk-ve-radio-checkbox .ve-option-checked .ve-option-icon {
    background: url('./assets/images/cal.png') no-repeat center;
}
.itemClass.ldk-ve-radio-checkbox .ve-option-checked .ve-option-icon::before {
    content: '' !important;
}

Example

LIVE EXAMPLE

A working example can be found in the example directory.

npm install

npm run dev
npm run start

License

MIT