Codey

Appearance

MultiSelect ​

INFO

This component is adopted from PrimeVue. It's full documentation can be found here.

javascript
import { XerMultiSelect } from "@xerius/codey-components";

Showcases ​

Default ​

With filter ​

With Long Item names ​

Note

The default behavior of the multi select is to show the full with of the selection panel based on the available width on the page. By Default this will not be contained to the width of the input. In case you need to alter this behavior, you can set the max width based on your application needs.

With error message ​

As Disabled ​

Without Form Control ​

Note

Using a component directly without XerFormControl or <label> requires you to place the correct aria-label on the underlying component input element.

Props ​

All props from the Prime Multi Select can be provided. The full documentation can be found here.

Events ​

All events from the Prime Multi Select can be provided. The full documentation can be found here.

Slots ​

All slots from the Prime Multi Select can be provided. The full documentation can be found here.

Automation Ids ​

A data-automation-id needs to be provided to the component as Prime Vue based components do not have a default data-automation-id.