BaseListbox

Listbox shape

The listbox is a component that renders a list of items. It can be used to render a list of text, media or complex objects. The default shape is rounded.

Default shape of all <BaseListbox> can be set in your .app/app.config.ts.
Show code

Floating labels

Listboxes can have a material design style floating label using the labelFloat prop.

Show code

Listbox items can have a sublabel using the sublabel prop of the properties object.

Show code

Listbox with media

Listbox items can have a media using the media prop of the properties object.

Show code

Listbox with icon

Listbox items can have an icon using the icon prop of the properties object.

Show code

Disabled state

Listboxes can be shown in a disabled state using the disabled prop.

Show code

Loading state

Listboxes can be shown in a loading state using the loading prop.

Show code

Multiple selection

Listboxes can be used to select multiple items using the multiple prop.

Show code
v-model
The model value of the multiselect.

@modifiers

`v-model="value"`

@modifiers

the value property of an object (as defined in properties.value) rather than the object itself `v-model.prop="value"`

Show example
items
The items to display in the multiselect.
Required
Show example
properties
The properties to use for the value, label, sublabel, media, and icon of the options items.
Show example
size
The size of the listbox.
Show example
icon
The icon to display for the multiselect.
Show example
label
The label to display for the multiselect.
Show example
shape
The shape of the multiselect.
Show example
error
An error message or boolean value indicating whether the input is in an error state.
Show example
disabled
Whether the multiselect is disabled.
Show example
loading
Whether the multiselect is in a loading state.
Show example
contrast
The contrast of the listbox.
Show example
placeholder
The placeholder text to display when no selection has been made.
Show example
multiple
Whether the multiselect allows multiple selections.
Show example
selected-icon
The icon to show when the component is selected.
Show example
multiple-label
The label to display for multiple selections, or a function that returns the label.
Show example
label-float
If the label should be floating.
Show example
#label
Show example
#listbox-button
Show example
#listbox-item
Show example
modelModifiers
Used internaly to allow v-model.number and v-model.trim
Show example