CheckboxListExpert

Perfect component for checboxlist with custom styles.

Live preview

Open in new tab ↗

Perfect component for checboxlist with custom styles. It's a little bit advanced but absolutely worth it!

Configuration:

  • label {String} can change the title label
  • required {Boolean} enables required (default: false)
  • disabled {Boolean} disables this control (default: false)
  • type {String} can contain number (default: string)
  • class {String} inserts a class into an element with class .ui-checkboxlistexpert-container
  • datasource {String} path to data-source (must be array or array of objects) or NEW: id|name,id|name
  • value {String} determines a property name for value (in data-source) (default: id)
  • disabledkey {String} determines a property name for disabled item (in data-source) (default: disabled)
  • NEW selector {String} a jQuery selector for custom template (outside of the component). Works like custom template in data-binding

Good to know

  • You must write all the styles
  • Example object { name: 'My item', id: 1, disabled: false, classname: 'color-highlighted' }
  • You can use $index and $path in template

Basic Styles

.my-button { display: inline-block; padding: 20px 40px; margin-right: 10px; border: 1px solid gray; cursor: pointer; border-radius: 2px; position: relative; user-select: none; }
.my-button .checkbox { position: absolute; top: 10px; left: 10px; }
.my-button.selected .checkbox i:before { content: "\f14a"; font-weight: 900; }
.my-button:hover { border-color: #4285F4; }
.my-button.selected { color: white; background: #4285F4; border-color: rgba(0, 0, 0, 0.2); }
.my-button[data-disabled="1"] { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; cursor: not-allowed; }
.ui-disabled .my-button .checkbox { color: #c3c3c3; }
.ui-disabled .my-button { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; cursor: not-allowed; }
.ui-disabled .my-button:hover { background-color: #dcdcdc; color: gray; border-color: #dcdcdc; }
.ui-disabled .my-button.selected { border-color: gray; background: #efefef; color: #5a5a5a; }

/* Dark mode */
.ui-dark .my-button { border-color: 1px solid #404040; color: #adadad; }
.ui-dark .my-button.selected { color: white; }
.ui-dark .my-button[data-disabled="1"] { background-color: #525252; color: gray; border-color: #525252; }
.ui-dark .ui-disabled .my-button { background-color: #525252; color: gray; border-color: #525252; }
.ui-dark .ui-disabled .my-button:hover { background-color: #525252; color: gray; border-color: #525252; }
.ui-dark .ui-disabled .my-button.selected { border-color: rgba(0, 0, 0, 0.2); background: #969696; color: #ffffff; }

/* Large mode */
.ui-large .my-button { font-size: 16px; }

More UI components

Browse all 348