j-DropdownCheckbox

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

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.

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>