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

Size

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

Show code

Contrast:default+

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

Show code

Contrast:muted

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

Show code

Contrast:muted+

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

Show code

Option group

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

Show code

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

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

Label:float

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

Show code

Loading

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

Show code

Disabled

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

Show code

#<BaseSelect>

Model

v-model
Show example

Properties

rounded
The radius of the select input.

@since

2.0.0

@default

'sm'

Show example
size
The size of the select input.

@default

'md'

Show example
label
The label text for the select input.
Show example
id
The form input identifier.
Show example
contrast
The contrast of the select input.

@default

'default'

Show example
classes
Classes to apply to the select input.
Show example
icon
An icon to display in the select input.
Show example
placeholder
The placeholder to display for the select input.
Show example
error
An error message to display, or a boolean indicating whether there is an error.
Show example
loading
Whether the select input is in a loading state.
Show example
disabled
Whether the select input is disabled.
Show example
label-float
If the label should be floating.
Show example

Slots

#label
Show example
#default
Show example
#icon
Show example

Exposed

el
The underlying HTMLInputElement element.
The underlying HTMLInputElement element.
Show example