Customizable

On this page, you can create a customized component for your Vue applications by adjusting its properties to suit your needs. It provides a live preview of the component's code and behavior, allowing you to design dynamic and user-friendly interfaces effortlessly.

Select

Find...

No data

Code

Options

red
blue
green
yellow
purple
orange
black
white
pink
brown

Select Data

The data items available for selection in a dropdown list. Should be an array of items.

id
name
shortName

Select Key

The key used to uniquely identify each item in the data set. Set to the property name used as the key.

id
name
shortName

Select Value

The key used to retrieve the display value of each item. Set to the property name used as the display value.

filled
outlined
underlined

Mode

Defines the styling mode for the component. Possible values: 'filled', 'outlined', 'underlined'.

Label

The text label associated with the input field. This label is displayed above or beside the input element.

offsetDynamic
offsetStatic
dynamic
static
vanishing
none

Label Mode

Defines how the label is displayed. Possible values: 'floating', 'inline', 'hidden'.

Auto Focus

Automatically focuses the input field on mount. Set to true to enable auto-focus.

Multiple

Enables multiple item selection. Set to true to allow selecting multiple items.

Max Visible

Maximum visible number of selected items. Set to a number to limit the number of visible items.

Close Button Badge

Enables a close button for badges in multiple selection mode. Set to true to show a close button on badges.

Is Invalid

Indicates whether the input is in an invalid state. Set to true if the input has validation errors.

Invalid Message

The validation error message to display when the input is invalid.

Required

Specifies whether the input field is required. Set to true if the input must be filled out before submitting the form.

Indicates whether the input field is in a loading state. Set to true to show a loading spinner.

Disabled

Disables the input field, making it uneditable. Set to true to disable the input.

Clear

Enables a clear button to reset the input field. Set to true to show a clear button.

Help

Additional help text displayed below the input field. Use this to provide extra information to the user.

Width

Specifies the width of the input field. Can be set to any valid CSS width value (e.g., '100px', '50%').

Height

Specifies the height of the input field. Can be set to any valid CSS height value (e.g., '50px', 'auto').

None
0
100
500
1000

Animation

Defines the animation for transitions within the layout. Possible values: 'transition-all duration-500', 'transition-none'.

No Data

Text displayed when there are no items in the list. Use this to provide a message when the list is empty.

No Query

Disables the query-based filtering of items. Set to true to disable filtering.

Select Class

Custom CSS class for the select container. Use this to apply additional styles to the select container.

Select List Class

Custom CSS class for the dropdown list container. Use this to apply additional styles to the dropdown list.

Mask Query Class

Custom CSS class for the query text mask. Use this to apply additional styles to the query text.

Body Class

Custom CSS class for the body of the layout. Use this to apply additional styles to the input body.

Class

Custom CSS class for the layout container. Use this to apply additional styles to the input layout.

Full list of properties

This page provides an overview of the Select component API, detailing its props, emits, slots, and exposed.