Documentation
Documentation Hub

Radius

The select component can have different shapes. Here is an example of a rounded select.

Default props of all <BaseSelect> can be set in your <app>/app.config.ts.
Show code
vue

Size

Selects can have different sizes. Use the size prop to change the size of the select component.

Show code
vue

Contrast:default+

Selects can have different contrasts. Use the contrast prop to change the contrast of the select component.

Show code
vue

Contrast:muted

Selects can have different contrasts. Use the contrast prop to change the contrast of the select component.

Show code
vue

Contrast:muted+

Selects can have different contrasts. Use the contrast prop to change the contrast of the select component.

Show code
vue

Option group

Selects can have option groups using the optgroup element to wrap your options.

Show code
vue

Icon

Selects can have a configurable icon on the left side using the icon prop. Make sure to pick meaningful icons for your use case.

Show code
vue

Error

Selects can be shown in an error state using the error prop. Use the same prop to display an error message.

This field is required
This field is required
This field is required
Show code
vue

Label:float

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

Show code
vue

Loading

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

Show code
vue

Disabled

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

Show code
vue

#<BaseSelect>

•Model

v-model
Show example
vue

•Properties

classes
Classes to apply to the select input.
Show example
vue
color-focus
Whether the color of the input should change when it is focused.
Show example
vue
disabled
Whether the select input is disabled.
Show example
vue
error
An error message to display, or a boolean indicating whether there is an error.
Show example
vue
icon
An icon to display in the select input.
Show example
vue
id
The form input identifier.
Show example
vue
label
The label text for the select input.
Show example
vue
label-float
If the label should be floating.
Show example
vue
loading
Whether the select input is in a loading state.
Show example
vue
placeholder
The placeholder to display for the select input.
Show example
vue

•Properties (with app.config)

rounded
The radius of the select input.

@since

2.0.0

Show example
vue
contrast
The contrast of the select input.
Show example
vue
size
The size of the select input.
Show example
vue

•Slots

#label
This slot has no inherted props
Show example
vue
#default
This slot has no inherted props
Show example
vue
#icon
This slot has no inherted props
Show example
vue

•Exposed

rounded
The radius of the select input.
Show example
vue
contrast
The contrast of the select input.
Show example
vue
size
The size of the select input.
Show example
vue
el
The underlying HTMLInputElement element.
Show example
vue