# Multiselect (deprecated)

The CpMultiselect component has some available configurations. In every configurations, 'options' is a required property. It should have this pattern:

:options="[
        {
          group: { label: 'Paris', code: 'PAR' },
          items: [
            { label: 'Charles de Gaulle', code: 'CDG' },
            { label: 'Orly', code: 'ORY' }
          ]
        },
        {
          group: { label: 'Lyon', code: 'LYO' },
          items: [
            { label: 'Lyon-Saint Exupéry', code: 'LYS' }
          ]
        }
      ]"

You can change the key of the element. This is the default configuration:

groupValues: {
  type: String,
  default: 'items'
},
groupValue: {
  type: String,
  default: 'code'
},
groupLabel: {
  type: String,
  default: 'label'
},
trackBy: {
  type: String,
  default: 'code'
},
itemLabel: {
  type: String,
  default: 'label'
}

# Simple select


  cp-multiselect(
    :options="[
        {
          group: { label: 'Paris', code: 'PAR' },
          items: [
            { label: 'Charles de Gaulle', code: 'CDG' },
            { label: 'Orly', code: 'ORY' }
          ]
        },
        {
          group: { label: 'Lyon', code: 'LYO' },
          items: [
            { label: 'Lyon-Saint Exupéry', code: 'LYS' }
          ]
        }
      ]"

# Group select

You can choose the all group in one click with group-select prop. It is false by default.


cp-multiselect(
  :options="
    [
      {
        group: { label: 'Paris', code: 'PAR' },
        items: [
          { label: 'Charles de Gaulle', code: 'CDG' },
          { label: 'Orly', code: 'ORY' }
        ]
      },
      {
        group: { label: 'Lyon', code: 'LYO' },
        items: [
          { label: 'Lyon-Saint Exupéry', code: 'LYS' }
        ]
      }
    ]"
  group-select="true"

# Group Unique Select

You can choose too only select the group title with group-select-unique prop. It is false by default.

TIP

In this case, it won't choose the whole group.


cp-multiselect(
  :options="
    [
      {
        group: { label: 'Paris', code: 'PAR' },
        items: [
          { label: 'Charles de Gaulle', code: 'CDG' },
          { label: 'Orly', code: 'ORY' }
        ]
      },
      {
        group: { label: 'Lyon', code: 'LYO' },
        items: [
          { label: 'Lyon-Saint Exupéry', code: 'LYS' }
        ]
      }
    ]"
  group-select="true"
  group-select-unique="true"

# Taggable

You can decide to put choice in tag style with taggable and multiple prop.

WARNING

They both have to be the same value.


cp-multiselect(
  :options="
    [
      {
        group: { label: 'Paris', code: 'PAR' },
        items: [
          { label: 'Charles de Gaulle', code: 'CDG' },
          { label: 'Orly', code: 'ORY' }
        ]
      },
      {
        group: { label: 'Lyon', code: 'LYO' },
        items: [
          { label: 'Lyon-Saint Exupéry', code: 'LYS' }
        ]
      }
    ]"
  taggable="true"
  multiple="true"
  group-select="true"