MultiSelect will render checkboxes on desktop and it will render "button-like" options on mobile.
Example Usage
<div class='categories'></div>
// Pull in the library
const UI = require('jibe-juice');
// Instantiate a component, pass the selector of the container to insert component into and the opts
const categories = new UI.RadioButtons('.categories', {
options: [
{
displayName: 'Marketing',
value: 'mrkt01',
count: 5
},
{
displayName: 'Sales',
value: 'sales',
count: 9
},
{
displayName: 'Engineering',
value: 'eng-2015',
count: 43
}
],
renderItem: function (item) {
return item.displayName + ' (' + item.count + ')';
}
});
// Subscribe to fire this function whenever the selected option changes
categories.subscribe((choice) => {
console.log('New Category kiiii!', choice);
categories.render();
});
// Render the DOM for the RadioButtons component
categories.render();
params
Name
Type
Default
Description
el
string
undefined
A string of the selector for the element to put the component in
opts
object
{}
A catch all for various options. See the opts table below for options specific to this component.
opts
Name
Type
Default
Description
displayNameKey
string
'displayName'
A string indicating the index of the displayName property
radioBoxes
boolean
false
A boolean indicating if our radio buttons should appear like checkboxes