---
You can customize icon, theme or color for Checkbox/Radio
Vue /React/ Svelte
---
### Usage
Install the package
```js
npm install --save svelte-radio-checkbox-z
```
Import the module in the place you want to use:
```js
import RadioCheckBox from "svelte-radio-checkbox-z";
```
### Snippet
```js
// 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
// theme custom
```
### 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
```js
```
#### options (`Array`)
list data like. `[Object, String, ...]`
```js
[
{
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`)
```js
// 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.
```css
/* 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.
```js
npm install
```
```js
npm run dev
npm run start
```
### License
MIT