Skip to main content

Inline mode

Basic example​

<cn-multiselect
      title="Select country"
      selected='["IT","FR"]'
      options='[{"value":"IT", "label":"Italy"},{"value":"FR", "label":"France"},{"value":"ES", "label":"Spain"}]'>
</cn-multiselect>

Enable search input​

<cn-multiselect
      title="Select country"
      search="true"
      placeholder-search="Search country.."
      selected='["IT"]'
      options='[{"value":"IT", "label":"Italy"},{"value":"FR", "label":"France"},{"value":"ES", "label":"Spain"}]'>
</cn-multiselect>

Preserve order​

If you are interessed to preserve order in selection you can set the property preserve-order to false.

<cn-multiselect
      title="Select country"
      preserve-order="true"
      selected='["IT"]'
      options='[{"value":"IT", "label":"Italy"},{"value":"FR", "label":"France"},{"value":"ES", "label":"Spain"}]'>
</cn-multiselect>

Enable select/deselect all actions​

<cn-multiselect
      selected='["IT"]'
      title="Select country"
      select-all="true"
      options='[{"value":"IT", "label":"Italy"},{"value":"FR", "label":"France"},{"value":"ES", "label":"Spain"}]'>
</cn-multiselect>

Limit max num selectable items​

<cn-multiselect
      title="Select country"
      max-selected-items="2"
      selected='["IT"]'
      options='[{"value":"IT", "label":"Italy"},{"value":"FR", "label":"France"},{"value":"ES", "label":"Spain"}]'>
</cn-multiselect>

Disable specific items​

<cn-multiselect
      title="Select country"
      disabled-items='["ES"]'
      selected='["IT"]'
      options='[{"value":"IT", "label":"Italy"},{"value":"FR", "label":"France"},{"value":"ES", "label":"Spain"}]'>
</cn-multiselect>

Disable multiselection​

You can use cn-multiselect also for generate a select input or radio input.
If multiple property is false then select/deselect all actions are not available.

<cn-multiselect
      title="Select country"
      multiple="false"
      selected='["IT"]'
      options='[{"value":"IT", "label":"Italy"},{"value":"FR", "label":"France"},{"value":"ES", "label":"Spain"}]'>
</cn-multiselect>

Enable popup mode​

<cn-multiselect
      title="Select country"
      popup="true"
      popup-title="Countries"
      selected='["IT"]'
      options='[{"value":"IT", "label":"Italy","style":{"backgroundColor":"orange"}},{"value":"FR", "label":"France"},{"value":"ES", "label":"Spain"}]'>
</cn-multiselect>