# j-DropdownCheckbox

> j-DropdownCheckbox: NEW now supports dark mode

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: c4b6324f743c342871595181cafc79c894f3f64626e8ce80d3a1e1a28955c0cd
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- __NEW__ now supports dark mode


__Configuration__:

- `required {Boolean}` (optional) enables "required" (default: `false`)
- `items {String}` (optional) static items `key1|value1, key2 with value, key3|value`
- `icon {String}` (optional) icon for label without `ti-` e.g. `home`, `cog`, etc.
- `checkicon {String}` (optional) check icon without `ti-`, (default: `check`).
- `label {String}` (optional) label (default is HTML content)
- `datasource {String}` path to data-source (must be array)
- `text {String}` determines a property name for text (in data-source), default: `name`
- `value {String}` determines a property name for value (in data-source) default :`id`
- `disabled {Boolean}` (optional) disables this component
- `cleaner {Boolean}` (optional) removes non-exist values (default: `true`)
- `limit {Number}` (optional) sets a limit for selected items (default: `0`)
- `visible {Number}` (optional) sets a maximum visible items then show `X selected` (default: `0`)
- `selectedtext {String}` (optional) sets a message for maximum visible items e.g. `{0} selected from {1}` (default: `{0} selected`)
- `alltext {String}` (optional) when all items are selected this is showed (default: `All selected` you can disable it with `null`)
- `placeholder {String}` (optional) sets a text for placeholder

Use it with `<ui-component name="dropdowncheckbox">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<div style="width:200px">
	<ui-component name="dropdowncheckbox" path="selected" config="required:true;type:number;items:Text 1|0,Text 2|1,Text 3|2,Text 4|3,Text 5|4,Text 6|5;visible:3">My label</ui-component>
</div>
<div style="width:200px;margin-top:30px">
	<ui-component name="dropdowncheckbox" path="selected2" config="placeholder:Placeholder;type:number;items:Text 1|0,Text 2|1,Text 3|2,Text 4|3,Text 5|4,Text 6|5;visible:3">My label</ui-component>
</div>
```