Skip to content

PrimeCascadeSelect

A FormKit wrapper for PrimeVue's CascadeSelect component.

Live Example on Website

Usage

vue
<FormKit type="primecascadeselect" :options="options" option-label="cname" option-group-label="name" :option-group-children="['states','cities']" v-model="selectedCity" />

Object-based Example

vue
<script setup>
const options = [
  {
    name: 'Australia',
    code: 'AU',
    states: [
      { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' } ] },
    ],
  },
  // ...more countries
]
const selectedCity = ref()
</script>

<FormKit
  type="primecascadeselect"
  label="Cascade Select"
  :options="options"
  option-label="cname"
  option-group-label="name"
  :option-group-children="['states', 'cities']"
  placeholder="Select a City"
  v-model="selectedCity"
/>

Schema-based Example

js
const schema = [
  {
    $formkit: 'primeCascadeSelect',
    label: 'Cascade Select',
    options: [
      {
        name: 'Australia',
        code: 'AU',
        states: [
          { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' } ] },
        ],
      },
      // ...more countries
    ],
    optionLabel: 'cname',
    optionGroupLabel: 'name',
    optionGroupChildren: ['states', 'cities'],
    placeholder: 'Select a City',
    name: 'selectedCity',
  },
]

Props

NameTypeDescription
optionsarrayOptions for selection
optionLabelstringField for label
optionValuestringField for value
optionGroupLabelstringField for group label
optionGroupChildrenarrayField for group children
placeholderstringPlaceholder text
ptobjectPass-through options
ptOptionsobjectPass-through options
unstyledbooleanDisable default styles
sizestringInput size

See PrimeVue CascadeSelect docs for more details.

FormKit PrimeVue Module