---

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

Vue /React/ Svelte

---

Usage

Install the package

npm install --save svelte-radio-checkbox-z

Import the module in the place you want to use:

import RadioCheckBox from "svelte-radio-checkbox-z";

Snippet

    // js
    // let selected = ['Radio', ...]  // radio || checkbox
    let selected = 'Radio' // radio
    let options = [
                'Radio',
                'Radio2',
                { label: 'Radio5', value: 'object', disabled: true },
                { label: 'Radio6', value: 'object1', disabled: true, className: "abcd", labelClassName: "addd" },
                // .... more
    ]

    const setSelectedValue = ({ detail }) => {
            selected = detail
    }

    // default => style html
    <RadioCheckBox bind:value={selected} bind:options={options} on:change={setSelectedValue}/>

    // theme custom
    <RadioCheckBox
        bind:value={selected}
        bind:options={options}
        on:change={setSelectedValue}
        theme='tick'
        selectColor='red'
        tickColor='blue'
    />

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

change (Function)

Update value

groupName (String)

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

options (Array)

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

[
    {
        label: 'Display', value: 'value', disabled: false,  // disabled option
        className: 'itemClass', labelClassName: 'labelClass',
        htmlData, // you change display label by htmlData
        checkedIcon // passing custom checked icon (special)
    },
    ...,
    '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): 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 type = 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.

With theme: `x...` || `tick...`
You can override css to see custom tick.

/* set your className(.itemClass) for selector unique */
.itemClass.ldk-sv-radio-checkbox .sv-option-checked .sv-option-icon {
    background: url('./assets/images/cal.png') no-repeat center;
}
.itemClass.ldk-sv-radio-checkbox .sv-option-checked .sv-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