Select

Select provides a dropdown interface for choosing from a list of options, supporting both single and multiple selection modes. It offers extensive customization capabilities including search functionality, custom templates, and comprehensive form integration.

Key features:

Flexible selection modes: Single selection by default, with optional multi-select capability
Option containers: Uses Option components to define selectable items with separate values and labels
Search functionality: Optional filtering to quickly find options in large lists
Custom templates: Configurable option display, value presentation, and empty state templates
Dynamic options: Supports both static Option children and dynamic lists via Items.

Using `Select`

The component accepts Option components as children defining a particular option's label-value pair. Option requires a value property and while also having a label that is displayed in the list. If the label is not specified value is shown.

<App>
  <Select>
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: using Select

<App>
  <Select>
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

You can use Select with dynamic options:

<App>
  <Select>
    <Items data="{['one', 'two', 'three']}" >
      <Option value="{$itemIndex}" label="{$item}" />
    </Items>
  </Select>
</App>

Example: using Select with dynamic options

<App>
  <Select>
    <Items data="{['one', 'two', 'three']}" >
      <Option value="{$itemIndex}" label="{$item}" />
    </Items>
  </Select>
</App>

Context variables available during execution:

$group: Group name when using groupBy (available in group header templates)
$item: Represents the current option's data (label and value properties)
$itemContext: Provides the removeItem() method for multi-select scenarios

Behaviors

This component supports the following behaviors:

Behavior	Properties
Animation	`animation`, `animationOptions`
Bookmark	`bookmark`, `bookmarkLevel`, `bookmarkTitle`, `bookmarkOmitFromToc`
Form Binding	`bindTo`, `initialValue`, `noSubmit`
Component Label	`label`, `labelPosition`, `labelWidth`, `labelBreak`, `required`, `enabled`, `shrinkToLabel`, `style`, `readOnly`
Publish/Subscribe	`subscribeToTopic`
Tooltip	`tooltip`, `tooltipMarkdown`, `tooltipOptions`
Validation	`bindTo`, `required`, `minLength`, `maxLength`, `lengthInvalidMessage`, `lengthInvalidSeverity`, `minValue`, `maxValue`, `rangeInvalidMessage`, `rangeInvalidSeverity`, `pattern`, `patternInvalidMessage`, `patternInvalidSeverity`, `regex`, `regexInvalidMessage`, `regexInvalidSeverity`, `validationMode`, `verboseValidationFeedback`
Styling Variant	`variant`

Properties

`autoFocus`

If this property is set to true, the component gets the focus automatically when displayed.

`clearable`

This property enables a clear button that allows the user to clear the selected value(s).

`dropdownHeight`

This property sets the height of the dropdown list. If not set, the height is determined automatically.

<App>
  <Select dropdownHeight="180px">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
    <Option value="opt4" label="fourth"/>
    <Option value="opt5" label="fifth"/>
    <Option value="opt6" label="sixth"/>
    <Option value="opt7" label="seventh"/>
    <Option value="opt8" label="eighth"/>
    <Option value="opt9" label="ninth"/>
    <Option value="opt10" label="tenth"/>
    <Option value="opt11" label="eleventh"/>
    <Option value="opt12" label="twelfth"/>
  </Select>
</App>

Example: dropdownHeight

<App>
  <Select dropdownHeight="180px">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
    <Option value="opt4" label="fourth"/>
    <Option value="opt5" label="fifth"/>
    <Option value="opt6" label="sixth"/>
    <Option value="opt7" label="seventh"/>
    <Option value="opt8" label="eighth"/>
    <Option value="opt9" label="ninth"/>
    <Option value="opt10" label="tenth"/>
    <Option value="opt11" label="eleventh"/>
    <Option value="opt12" label="twelfth"/>
  </Select>
</App>

`emptyListTemplate`

This optional property provides the ability to customize what is displayed when the list of options is empty.

Click on the second field to see the custom empty list indicator.

<App>
  <VStack>
    <Text value="Default:" />
    <Select />
  </VStack>
  <VStack>
    <Text value="Custom:" />
    <Select>
      <property name="emptyListTemplate">
        <Text variant="strong" value="Nothing to see here!" />
      </property>
    </Select>
  </VStack>
</App>

Example: emptyListTemplate

<App>
  <VStack>
    <Text value="Default:" />
    <Select />
  </VStack>
  <VStack>
    <Text value="Custom:" />
    <Select>
      <property name="emptyListTemplate">
        <Text variant="strong" value="Nothing to see here!" />
      </property>
    </Select>
  </VStack>
</App>

`enabled`

This boolean property value indicates whether the component responds to user events (true) or not (false).

<App>
  <Select enabled="false" />
</App>

Example: enabled

<App>
  <Select enabled="false" />
</App>

`groupBy`

This property sets which attribute should be used to group the available options. No grouping is done if omitted. Use it with the category attribute on Options to define groups. If no options belong to a group, that group will not be shown.

<App>
  <Select groupBy="category" placeholder="Select a product">
    <Option value="1" label="Apple" category="Fruit" />
    <Option value="2" label="Banana" category="Fruit" />
    <Option value="3" label="Other" />
    <Option value="4" label="Misc" />
    <Option value="5" label="Carrot" category="Vegetable" />
  </Select>
</App>

Example: groupBy

<App>
  <Select groupBy="category" placeholder="Select a product">
    <Option value="1" label="Apple" category="Fruit" />
    <Option value="2" label="Banana" category="Fruit" />
    <Option value="3" label="Other" />
    <Option value="4" label="Misc" />
    <Option value="5" label="Carrot" category="Vegetable" />
  </Select>
</App>

`groupHeaderTemplate`

Enables the customization of how option groups are displayed in the dropdown. You can use the $group context variable to access the group name.

<App>
  <Select groupBy="type" placeholder="Select a product">
    <property name="groupHeaderTemplate">
      <H3>{$group}</H3>
    </property>
    <Items items="{[
      { id: 1, name: 'MacBook Pro', type: 'Apple' },
      { id: 2, name: 'iPad Air', type: 'Apple' },
      { id: 3, name: 'XPS', type: 'Dell' },
      { id: 4, name: 'Tab', type: 'Samsung' }
    ]}">
      <Option value="{$item.id}" label="{$item.name}" type="{$item.type}" />
    </Items>
  </Select>
</App>

Example: groupHeaderTemplate

<App>
  <Select groupBy="type" placeholder="Select a product">
    <property name="groupHeaderTemplate">
      <H3>{$group}</H3>
    </property>
    <Items items="{[
      { id: 1, name: 'MacBook Pro', type: 'Apple' },
      { id: 2, name: 'iPad Air', type: 'Apple' },
      { id: 3, name: 'XPS', type: 'Dell' },
      { id: 4, name: 'Tab', type: 'Samsung' }
    ]}">
      <Option value="{$item.id}" label="{$item.name}" type="{$item.type}" />
    </Items>
  </Select>
</App>

`initialValue`

This property sets the component's initial value.

<App>
  <Select initialValue="opt3">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: initialValue

<App>
  <Select initialValue="opt3">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

`inProgress`

This property indicates whether the component is in progress. It can be used to show a loading message.

`inProgressNotificationMessage`

This property indicates the message to display when the component is in progress.

`multiSelect`

The true value of the property indicates if the user can select multiple items.

<App>
  <Select multiSelect="true" dropdownHeight="180px" >
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
    <Option value="opt4" label="fourth"/>
    <Option value="opt5" label="fifth"/>
    <Option value="opt6" label="sixth"/>
    <Option value="opt7" label="seventh"/>
    <Option value="opt8" label="eighth"/>
    <Option value="opt9" label="ninth"/>
    <Option value="opt10" label="tenth"/>
    <Option value="opt11" label="eleventh"/>
    <Option value="opt12" label="twelfth"/>
  </Select>
</App>

Example: multiSelect

<App>
  <Select multiSelect="true" dropdownHeight="180px" >
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
    <Option value="opt4" label="fourth"/>
    <Option value="opt5" label="fifth"/>
    <Option value="opt6" label="sixth"/>
    <Option value="opt7" label="seventh"/>
    <Option value="opt8" label="eighth"/>
    <Option value="opt9" label="ninth"/>
    <Option value="opt10" label="tenth"/>
    <Option value="opt11" label="eleventh"/>
    <Option value="opt12" label="twelfth"/>
  </Select>
</App>

`optionLabelTemplate`

This property allows replacing the default template to display an option in the dropdown list.

In the template definition, you can use the $item context property to access the particular item's label and value.

<App>
  <Select initialValue="{0}" placeholder="Select..." searchable>
    <property name="optionLabelTemplate">
      <HStack
        paddingHorizontal="$padding-tight"
        border="2px dotted $color-primary-500">
        <Text>{$item.label}</Text>
      </HStack>
    </property>
    <Option value="{0}" label="zero"/>
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: optionLabelTemplate

<App>
  <Select initialValue="{0}" placeholder="Select..." searchable>
    <property name="optionLabelTemplate">
      <HStack
        paddingHorizontal="$padding-tight"
        border="2px dotted $color-primary-500">
        <Text>{$item.label}</Text>
      </HStack>
    </property>
    <Option value="{0}" label="zero"/>
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

`optionTemplate`

This property allows replacing the default template to display an option in the dropdown list.

<App>
  <Select>
    <property name="optionTemplate">
      <HStack verticalAlignment="center" gap="$space-0_5">
        <Icon name="info" />
        <Text value="{$item.label}" variant="strong" />
      </HStack>
    </property>
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: optionTemplate

<App>
  <Select>
    <property name="optionTemplate">
      <HStack verticalAlignment="center" gap="$space-0_5">
        <Icon name="info" />
        <Text value="{$item.label}" variant="strong" />
      </HStack>
    </property>
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

`placeholder`

An optional placeholder text that is visible in the input field when its empty.

<App>
  <Select placeholder="Please select an item">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: placeholder

<App>
  <Select placeholder="Please select an item">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

`readOnly`

Set this property to true to disallow changing the component value.

`required`

Set this property to true to indicate it must have a value before submitting the containing form.

`searchable`

This property enables the search functionality in the dropdown list.

`ungroupedHeaderTemplate`

Enables the customization of how the ungrouped options header is displayed in the dropdown. If not provided, ungrouped options will not have a header.

<App>
  <Select groupBy="category" placeholder="Select a product">
    <property name="ungroupedHeaderTemplate">
      <H3>Other Items</H3>
    </property>
    <Option value="1" label="Apple" category="Fruit" />
    <Option value="2" label="Banana" category="Fruit" />
    <Option value="3" label="Other" />
    <Option value="4" label="Misc" />
    <Option value="5" label="Carrot" category="Vegetable" />
  </Select>
</App>

Example: ungroupedHeaderTemplate

<App>
  <Select groupBy="category" placeholder="Select a product">
    <property name="ungroupedHeaderTemplate">
      <H3>Other Items</H3>
    </property>
    <Option value="1" label="Apple" category="Fruit" />
    <Option value="2" label="Banana" category="Fruit" />
    <Option value="3" label="Other" />
    <Option value="4" label="Misc" />
    <Option value="5" label="Carrot" category="Vegetable" />
  </Select>
</App>

`validationIconError`

Icon to display for error state when concise validation summary is enabled.

`validationIconSuccess`

Icon to display for valid state when concise validation summary is enabled.

`validationStatus`

This property allows you to set the validation status of the input component.

Available values:

Value	Description
`valid`	Visual indicator for an input that is accepted
`warning`	Visual indicator for an input that produced a warning
`error`	Visual indicator for an input that produced an error

<App>
  <Select />
  <Select validationStatus="valid" />
  <Select validationStatus="warning" />
  <Select validationStatus="error" />
</App>

Example: validationStatus

<App>
  <Select />
  <Select validationStatus="valid" />
  <Select validationStatus="warning" />
  <Select validationStatus="error" />
</App>

`valueTemplate`

This property allows replacing the default template to display a selected value. It works in both single-select and multi-select modes (multiSelect is true).

In the template definition, you can use the $item context property to access the particular item's label and value. The $itemContext property provides a removeItem method to delete a value from the current selection.

<App>
  <Select initialValue="{0}" placeholder="Select..." multiSelect>
    <property name="valueTemplate">
      <HStack
        paddingLeft="$padding-tight"
        border="2px dotted $color-primary-500"
        verticalAlignment="center">
        <Text>{$item.label}</Text>
        <Button
          variant="ghost"
          icon="close"
          size="xs"
          onClick="$itemContext.removeItem()"/>
      </HStack>
    </property>
    <Option value="{0}" label="zero"/>
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: valueTemplate

<App>
  <Select initialValue="{0}" placeholder="Select..." multiSelect>
    <property name="valueTemplate">
      <HStack
        paddingLeft="$padding-tight"
        border="2px dotted $color-primary-500"
        verticalAlignment="center">
        <Text>{$item.label}</Text>
        <Button
          variant="ghost"
          icon="close"
          size="xs"
          onClick="$itemContext.removeItem()"/>
      </HStack>
    </property>
    <Option value="{0}" label="zero"/>
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

`verboseValidationFeedback`

Enables a concise validation summary (icon) in input components.

Events

`didChange`

This event is triggered when value of Select has changed.

Signature: didChange(newValue: any): void

newValue: The new value of the component.

<App>
  <variable name="newValue" value="(none)" />
  <Text value="{newValue}" />
  <Select onDidChange="(newItem) => newValue = newItem">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: didChange

<App>
  <variable name="newValue" value="(none)" />
  <Text value="{newValue}" />
  <Select onDidChange="(newItem) => newValue = newItem">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

`gotFocus`

This event is triggered when the Select has received the focus.

Signature: gotFocus(): void

<App>
  <variable name="isFocused" value="{false}" />
  <Text value="Input control is focused: {isFocused}" />
  <Select
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: gotFocus/lostFocus

<App>
  <variable name="isFocused" value="{false}" />
  <Text value="Input control is focused: {isFocused}" />
  <Select
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

`lostFocus`

This event is triggered when the Select has lost the focus.

Signature: lostFocus(): void

Exposed Methods

`focus`

This method focuses the Select component. You can use it to programmatically focus the component.

Signature: focus(): void

<App>
  <Button label="Focus Input" onClick="inputControl.focus()" />
  <Select id="inputControl">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

Example: focus()

<App>
  <Button label="Focus Input" onClick="inputControl.focus()" />
  <Select id="inputControl">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
</App>

`reset`

This method resets the component to its initial value, or clears the selection if no initial value was provided.

Signature: reset(): void

`setValue`

This API sets the value of the Select. You can use it to programmatically change the value.

Signature: setValue(value: string | string[] | undefined): void

value: The new value to set. Can be a single value or an array of values for multi-select.

<App>
  <Select id="inputControl">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
  <HStack>
    <Button
      label="Select 2nd Item"
      onClick="inputControl.setValue('opt2')" />
    <Button
      label="Remove Selection"
      onClick="inputControl.setValue('')" />
  </HStack>
</App>

Example: setValue()

<App>
  <Select id="inputControl">
    <Option value="opt1" label="first"/>
    <Option value="opt2" label="second"/>
    <Option value="opt3" label="third"/>
  </Select>
  <HStack>
    <Button
      label="Select 2nd Item"
      onClick="inputControl.setValue('opt2')" />
    <Button
      label="Remove Selection"
      onClick="inputControl.setValue('')" />
  </HStack>
</App>

`value`

This API retrieves the current value of the Select. You can use it to get the value programmatically.

Signature: get value(): string | string[] | undefined

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

clearButton: The button to clear the selected value(s).
item: Each option item within the Select component.
menu: The dropdown menu within the Select component.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-item-Select	$backgroundColor-dropdown-item	$backgroundColor-dropdown-item
backgroundColor-item-Select--active	$backgroundColor-dropdown-item--active	$backgroundColor-dropdown-item--active
backgroundColor-item-Select--hover	$backgroundColor-dropdown-item--hover	$backgroundColor-dropdown-item--hover
backgroundColor-menu-Select	$color-surface-raised	$color-surface-raised
backgroundColor-menu-Select	$color-surface-raised	$color-surface-raised
backgroundColor-Select--default	none	none
backgroundColor-Select--default--hover	none	none
backgroundColor-Select--disabled	none	none
backgroundColor-Select--error	none	none
backgroundColor-Select--error--hover	none	none
backgroundColor-Select--success	none	none
backgroundColor-Select--success--hover	none	none
backgroundColor-Select--warning	none	none
backgroundColor-Select--warning--hover	none	none
backgroundColor-Select-badge	$color-primary-500	$color-primary-500
backgroundColor-Select-badge	$color-primary-500	$color-primary-500
backgroundColor-Select-badge--active	$color-primary-500	$color-primary-500
backgroundColor-Select-badge--active	$color-primary-500	$color-primary-500
backgroundColor-Select-badge--hover	$color-primary-400	$color-primary-400
backgroundColor-Select-badge--hover	$color-primary-400	$color-primary-400
border-Select	none	none
borderBottom-Select	none	none
borderBottomColor-Select	none	none
borderBottomStyle-Select	none	none
borderBottomWidth-Select	none	none
borderColor-menu-Select	$borderColor	$borderColor
borderColor-menu-Select	$borderColor	$borderColor
borderColor-Select	none	none
borderColor-Select--default	none	none
borderColor-Select--default--hover	none	none
borderColor-Select--disabled	$borderColor--disabled	$borderColor--disabled
borderColor-Select--disabled	$borderColor--disabled	$borderColor--disabled
borderColor-Select--error	none	none
borderColor-Select--error--hover	none	none
borderColor-Select--success	none	none
borderColor-Select--success--hover	none	none
borderColor-Select--warning	none	none
borderColor-Select--warning--hover	none	none
borderEndEndRadius-Select	none	none
borderEndStartRadius-Select	none	none
borderHorizontal-Select	none	none
borderHorizontalColor-Select	none	none
borderHorizontalStyle-Select	none	none
borderHorizontalWidth-Select	none	none
borderLeft-Select	none	none
borderLeftColor-Select	none	none
borderLeftStyle-Select	none	none
borderLeftWidth-Select	none	none
borderRadius-menu-Select	$borderRadius	$borderRadius
borderRadius-menu-Select	$borderRadius	$borderRadius
borderRadius-Select--default	none	none
borderRadius-Select--error	none	none
borderRadius-Select--success	none	none
borderRadius-Select--warning	none	none
borderRadius-Select-badge	$borderRadius	$borderRadius
borderRight-Select	none	none
borderRightColor-Select	none	none
borderRightStyle-Select	none	none
borderRightWidth-Select	none	none
borderStartEndRadius-Select	none	none
borderStartStartRadius-Select	none	none
borderStyle-Select	none	none
borderStyle-Select--default	none	none
borderStyle-Select--error	none	none
borderStyle-Select--success	none	none
borderStyle-Select--warning	none	none
borderTop-Select	none	none
borderTopColor-Select	none	none
borderTopStyle-Select	none	none
borderTopWidth-Select	none	none
borderVertical-Select	none	none
borderVerticalColor-Select	none	none
borderVerticalStyle-Select	none	none
borderVerticalWidth-Select	none	none
borderWidth-menu-Select	1px	1px
borderWidth-menu-Select	1px	1px
borderWidth-Select	none	none
borderWidth-Select--default	none	none
borderWidth-Select--error	none	none
borderWidth-Select--success	none	none
borderWidth-Select--warning	none	none
boxShadow-menu-Select	$boxShadow-md	$boxShadow-md
boxShadow-menu-Select	$boxShadow-md	$boxShadow-md
boxShadow-Select--default	none	none
boxShadow-Select--default--hover	none	none
boxShadow-Select--error	none	none
boxShadow-Select--error--hover	none	none
boxShadow-Select--success	none	none
boxShadow-Select--success--hover	none	none
boxShadow-Select--warning	none	none
boxShadow-Select--warning--hover	none	none
fontSize-placeholder-Select--default	none	none
fontSize-placeholder-Select--error	none	none
fontSize-placeholder-Select--success	none	none
fontSize-placeholder-Select--warning	none	none
fontSize-Select--default	none	none
fontSize-Select--error	none	none
fontSize-Select--success	none	none
fontSize-Select--warning	none	none
fontSize-Select-badge	$fontSize-sm	$fontSize-sm
fontSize-Select-badge	$fontSize-sm	$fontSize-sm
minHeight-item-Select	$space-7	$space-7
minHeight-Select	$space-7	$space-7
opacity-text-item-Select--disabled	none	none
outlineColor-Select--default--focus	none	none
outlineColor-Select--error--focus	none	none
outlineColor-Select--focus	none	none
outlineColor-Select--success--focus	none	none
outlineColor-Select--warning--focus	none	none
outlineOffset-Select--default--focus	none	none
outlineOffset-Select--error--focus	none	none
outlineOffset-Select--focus	none	none
outlineOffset-Select--success--focus	none	none
outlineOffset-Select--warning--focus	none	none
outlineStyle-Select--default--focus	none	none
outlineStyle-Select--error--focus	none	none
outlineStyle-Select--focus	none	none
outlineStyle-Select--success--focus	none	none
outlineStyle-Select--warning--focus	none	none
outlineWidth-Select--default--focus	none	none
outlineWidth-Select--error--focus	none	none
outlineWidth-Select--focus	none	none
outlineWidth-Select--success--focus	none	none
outlineWidth-Select--warning--focus	none	none
padding-item-Select	none	none
padding-Select	none	none
paddingBottom-item-Select	none	none
paddingBottom-Select	none	none
paddingHorizontal-item-Select	$space-2	$space-2
paddingHorizontal-Select	$space-2	$space-2
paddingHorizontal-Select-badge	$space-2_5	$space-2_5
paddingLeft-item-Select	none	none
paddingLeft-Select	none	none
paddingRight-item-Select	none	none
paddingRight-Select	none	none
paddingTop-item-Select	none	none
paddingTop-Select	none	none
paddingVertical-item-Select	$space-2	$space-2
paddingVertical-Select	$space-2	$space-2
paddingVertical-Select-badge	$space-0_5	$space-0_5
textColor-indicator-Select	none	none
textColor-item-Select--disabled	$color-surface-300	$color-surface-300
textColor-placeholder-Select	none	none
textColor-placeholder-Select--default	none	none
textColor-placeholder-Select--error	none	none
textColor-placeholder-Select--success	none	none
textColor-placeholder-Select--warning	none	none
textColor-Select--default	none	none
textColor-Select--default--hover	none	none
textColor-Select--disabled	$textColor--disabled	$textColor--disabled
textColor-Select--disabled	$textColor--disabled	$textColor--disabled
textColor-Select--error	none	none
textColor-Select--error--hover	none	none
textColor-Select--success	none	none
textColor-Select--success--hover	none	none
textColor-Select--warning	none	none
textColor-Select--warning--hover	none	none
textColor-Select-badge	$const-color-surface-50	$const-color-surface-50
textColor-Select-badge	$const-color-surface-50	$const-color-surface-50
textColor-Select-badge--active	none	none
textColor-Select-badge--hover	none	none

Select

Using Select

Behaviors

Properties

autoFocus

clearable

dropdownHeight

emptyListTemplate

enabled

groupBy

groupHeaderTemplate

initialValue

inProgress

inProgressNotificationMessage

multiSelect

optionLabelTemplate

optionTemplate

placeholder

readOnly

required

searchable

ungroupedHeaderTemplate

validationIconError

validationIconSuccess

validationStatus

valueTemplate

verboseValidationFeedback