SelectField

Component

Props

Usage

id

Sets the id of the field.

 <template>
    <SelectField id="field-id" />
</template>
 

• Type: string
• Required: true

label

Sets the label of the field.

 <template>
    <SelectField label="Label text" />
</template>
 

• Type: string

helpText

Sets the help text of the field.

 <template>
    <SelectField helpText="Help text example" />
</template>
 

• Type: string

helpTextPosition

Sets the position of the help text relative to the field. It uses the Position enum.

 <template>
    <SelectField helpTextPosition="top" helpText="Appears above the field" />
</template>
 

• Type: Position
• Default: Position.BOTTOM

Options

required

Sets whether the field is required or not.

 <template>
    <SelectField required />
</template>
 

• Type: boolean
• Default: false

showOptionalLabel

When the field is not required, shows an "(optional)" hint next to the label. Set to false to hide it. The hint text defaults to a global setting that can be overridden project-wide, and can also be overridden per field with the optionalLabel prop.

 <template>
    <SelectField label="Country" :showOptionalLabel="false" />
</template>
 

• Type: boolean
• Default: true

optionalLabel

Overrides the "(optional)" hint text for this specific field, taking priority over the global default.

 <template>
    <SelectField label="Country" optionalLabel="(not required)" />
</template>
 

• Type: string

options

Sets the options of the field. The array of options must be of type SelectOption.

 <template>
    <SelectField :options="items" />
</template>
<script setup lang="ts">
const items: SelectOption[] = [
    {
        value: 1,
        text: 'Option 1',
    },
    {
        value: 2,
        text: 'Option 2',
    },
    {
        value: 3,
        text: 'Option 3',
    },
]
</script>
 

TypeScript interface

 interface SelectOption {
    id?: string | number
    value: string | number
    sectionTitle?: boolean
    text?: string
    icon?: string
    userDisplayName?: string
    userProfileImg?: string
    imgUrl?: string
    alt?: string
    helpText?: string
    to?: string
    isExternal?: boolean
}
 

placeholder

Sets the placeholder text of the field.

 <template>
    <SelectField placeholder="Select an option" />
</template>
 

• Type: string
• Default: 'Select an option'

modelValue

Sets the value of the field. The value can be a string, number, or an array of strings or numbers.

 <template>
    <SelectField v-model="selectedValue" />
</template>
<script setup lang="ts">
const selectedValue = ref<string | number | (string | number)[]>(null)
</script>
 

• Type: string | number | (string | number)[] | null
• Default: null

type

Sets the type of the field. It uses the SelectType enum.

 <template>
    <SelectField 
        :type="SelectType.ICON" 
        :options="items"
    />
</template>
<script setup lang="ts">
const items: SelectOption[] = [
    {
        value: 'home',
        text: 'Home',
        icon: 'mdi:home-outline',
    },
    {
        value: 'settings',
        text: 'Settings',
        icon: 'mdi:cog-outline',
    },
    {
        value: 'profile',
        text: 'Profile',
        icon: 'mdi:account-outline',
    },
]
</script>
 

• Type: SelectType
• Default: SelectType.TEXT

Options

size

Sets the size of the input field. It uses the InputSize enum.

 <template>
    <SelectField :size="InputSize.MD" />
</template>
 

• Type: InputSize
• Default: InputSize.MD

Options

activeStyle

Sets the active style of the selected option. It uses the SelectActiveStyle enum.

 <template>
    <SelectField :activeStyle="SelectActiveStyle.FILL" />
</template>
 

• Type: SelectActiveStyle
• Default: SelectActiveStyle.CHECK

Options

dropdownPosition

Sets the position of the dropdown. It uses the Position enum.

 <template>
    <SelectField :dropdownPosition="Position.TOP" />
</template>
 

• Type: Position
• Default: Position.BOTTOM

Options

filterable

Sets whether the select field is filterable or not.

 <template>
    <SelectField filterable />
</template>
 

• Type: boolean
• Default: false

searchFieldPlaceholder

Sets the placeholder text of the search field.

 <template>
    <SelectField searchFieldPlaceholder="Search..." />
</template>
 

• Type: string
• Default: 'Search...'

noResultsFoundText

Sets the text displayed when no results are found in the search.

 <template>
    <SelectField noResultsFoundText="No results found" />
</template>
 

• Type: string
• Default: 'No results found'

disabled

Sets whether the select field is disabled or not.

 <template>
    <SelectField disabled />
</template>
 

• Type: boolean
• Default: false

validator

Sets the validator function for the field, which controls its internal validation state.

 <template>
    <InputField :validator="validateField" />
</template>
 

• Type: function
• Default: null

error (v-model:error)

Sets the error message of the field. This prop is bindable via v-model:error, allowing two-way syncing of the validation state.

 <template>
    <SelectField v-model:error="errorMessage" />
</template>
 

• Type: string
• Default: ''

hasSeparator

Adds a separator between options in the dropdown.

 <template>
    <SelectField hasSeparator />
</template>
 

• Type: boolean
• Default: false

multiple

Enables multiple selection mode.

 <template>
    <SelectField multiple />
</template>
 

• Type: boolean
• Default: false

hasBadgeStack

Enables badge stack for multiple selected options.

 <template>
    <SelectField hasBadgeStack multiple />
</template>
 

• Type: boolean
• Default: false

allowDeselect

Allows deselecting the selected option.

 <template>
    <SelectField allowDeselect />
</template>
 

• Type: boolean
• Default: false

showLoadingState

Sets whether to show the loading state when options are being loaded.

 <template>
    <SelectField showLoadingState />
</template>
 

• Type: boolean
• Default: true

isLoading

Sets whether the options are currently being loaded.

 <template>
    <SelectField :isLoading="true" />
</template>
 

• Type: boolean
• Default: true

loadingText

Sets the loading text displayed when options are being loaded.

 <template>
    <SelectField loadingText="Loading options..." />
</template>
 

• Type: string
• Default: 'Loading options...'

loadingOptionsPlaceholder

Sets the placeholder text displayed when options are being loaded.

 <template>
    <SelectField loadingOptionsPlaceholder="Options are being loaded" />
</template>
 

• Type: string
• Default: 'Options are being loaded'

selectBoxClass

Allows passing custom classes to the select box for additional styling.

 <template>
    <SelectField selectBoxClass="custom-select-box" />
</template>
 

• Type: string

clearSelectionAriaLabel

Sets the accessible label for the clear selection button in multi-select mode. Useful for i18n.

 <template>
    <SelectField clearSelectionAriaLabel="Limpiar selección" />
</template>
 

• Type: string

transparent

When true, removes the default bg-background-container-surface background from the select box, making it transparent.

 <template>
    <SelectField transparent />
</template>
 

• Type: boolean
• Default: false

shouldTeleport

Teleports the dropdown panel to teleportTo (body by default) instead of rendering it as an absolutely-positioned descendant of the select box. Enable this when the field is used inside a container with overflow-hidden/overflow-auto (such as Table), otherwise the dropdown panel gets clipped by that ancestor.

 <template>
    <SelectField
        id="field-id"
        shouldTeleport
    />
</template>
 

• Type: boolean
• Default: false

teleportTo

Sets the teleport target selector used when shouldTeleport is true.

 <template>
    <SelectField
        id="field-id"
        shouldTeleport
        teleportTo="body"
    />
</template>
 

• Type: string
• Default: 'body'