Select

Form-ready since 2.6.0

Guidelines

Guidelines

A select component allows users to choose from a list of options. It supports single or multiple selections and the editable variant allows users to add new items. We typically use select components in forms, filters and settings where users need to choose from predefined options.

1. Label
2. Required indicator
3. Placeholder
4. Clear button
5. Open dropdown button
6. Container
7. Dropdown list
8. List header
9. Selected list item
10. Editable mode (add new items)

Options

• Label: See form field.
• Placeholder: Use a placeholder to provide information about what to enter or additional relevant context while the input field is empty. We typically use a placeholder when the label is not visible or we need to provide additional context.
• Helper text: See form field.
• Feedback text: See form field.
• Show clear button: Select components can have a dedicated button to easily clear the selection. Hide the button when offering users other ways to reset, e.g. a default item like "none", or if you aim for simplified keyboard accessibility.
• List header: Use a header to provide additional context or instructions about the items to help users understand the choices better.
  • Hide list header: Hide the header of the dropdown list when not required.
• Information for no matches: Set a message to be displayed when no item matches the inserted text.
• Editable: When enabled, users can add new items to the list.
• Multiselect: Allow users to select multiple items from the list.
• Item label: Set a short and concise label for dropdown items.
• Selected item: Mark selected items in the dropdown with a check mark.

Behavior in context

• Validation: See validation.
• Interaction:
  • Click or Enter key on button opens dropdown list.
  • Typing in the input field filters the dropdown list.
  • Arrow keys navigate within the dropdown list.
  • Click or Enter selects a highlighted list item.
  • Escape key closes dropdown list and returns to the originally selected value.
• Overflow:
  • The text in an input field is truncated with the length of the container.
  • On the multiselect, the selected items break into a second line and then show a scrollbar if it extends beyond two lines.
  • The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. The maximum width of the dropdown list is set to 100% by default. Use the properties dropdownWidth and dropdownMaxWidth to customize the dimensions.
• Alignment: Selects are always aligned to the left, while right alignment is reserved exclusively for number inputs.

States

The select field has five states: default, hover, focused, disabled and read-only. In the disabled state, the input field is displayed without offering any user interaction.

Dos and Don’ts

• Do consider performance when loading an extensive list of items
• Do use the select component when there is a finite list of items available to avoid manual input errors or duplicates
• Do sort items logically, e.g. alphabetically or numerically
• Don't use selects for binary choices, like yes and no, use radio buttons, checkboxes or toggles instead
• Don't use selects for navigational or search patterns, use category filters or search fields instead
• Don't combine several data attributes in an item label, use tables or event lists with a search functionality instead

Related patterns

• Form field
• Validation
• Layout
• Input
• Radio button
• Checkbox
• Toggle
• Date input

Development

Development

Examples

Basic

PreviewAngularReactVueJavaScript

Editable

PreviewAngularReactVueJavaScript

Multiselect

PreviewAngularReactVueJavaScript

Validation

Since 2.6.0

PreviewAngularReactVueJavaScript

API (ix-select)

Properties

Name

Description and specifications

allowClear

Show clear button

Attribute:

allow-clear

Type:

boolean

Default:

false

disabled

If true the select will be in disabled state

Attribute:

disabled

Type:

boolean

Default:

false

dropdownMaxWidth

Since 2.7.0

The maximum width of the dropdown element with value and unit (e.g. "200px" or "12.5rem"). By default the maximum width of the dropdown element is set to 100%.

Attribute:

dropdown-max-width

Type:

string ｜ undefined

dropdownWidth

Since 2.7.0

The width of the dropdown element with value and unit (e.g. "200px" or "12.5rem").

Attribute:

dropdown-width

Type:

string ｜ undefined

editable

Select is extendable

Attribute:

editable

Type:

boolean

Default:

false

helperText

Since 2.6.0

Helper text for the select component

Attribute:

helper-text

Type:

string ｜ undefined

hideListHeader

Since 1.5.0

Hide list header

Attribute:

hide-list-header

Type:

boolean

Default:

false

i18nNoMatches

Since 1.5.0

Information inside of dropdown if no items where found with current filter text

Attribute:

i-1-8n-no-matches

Type:

string

Default:

'No matches'

i18nPlaceholder

Input field placeholder

Attribute:

i-1-8n-placeholder

Type:

string

Default:

'Select an option'

i18nPlaceholderEditable

Input field placeholder for editable select

Attribute:

i-1-8n-placeholder-editable

Type:

string

Default:

'Type of select option'

i18nSelectListHeader

Select list header

Attribute:

i-1-8n-select-list-header

Type:

string

Default:

'Select an option'

infoText

Since 2.6.0

Info text for the select component

Attribute:

info-text

Type:

string ｜ undefined

invalidText

Since 2.6.0

Error text for the select component

Attribute:

invalid-text

Type:

string ｜ undefined

label

Since 2.6.0

Label for the select component

Attribute:

label

Type:

string ｜ undefined

mode

Selection mode

Attribute:

mode

Type:

"multiple" ｜ "single"

Default:

'single'

name

Since 2.6.0

A string that represents the element's name attribute, containing a name that identifies the element when submitting the form.

Attribute:

name

Type:

string ｜ undefined

readonly

If true the select will be in readonly mode

Attribute:

readonly

Type:

boolean

Default:

false

required

Since 2.6.0

A Boolean attribute indicating that an option with a non-empty string value must be selected

Attribute:

required

Type:

boolean

Default:

false

selectedIndices

Deprecated

since 2.0.0. Use the `value` property instead.

Indices of selected items. This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.

Attribute:

selected-indices

Type:

string ｜ string[] ｜ undefined

showTextAsTooltip

Since 2.6.0

Show helper, error, info, warning text as tooltip

Attribute:

show-text-as-tooltip

Type:

boolean ｜ undefined

validText

Since 2.6.0

Valid text for the select component

Attribute:

valid-text

Type:

string ｜ undefined

value

Since 2.0.0

Current selected value. This corresponds to the value property of ix-select-items

Attribute:

value

Type:

string ｜ string[]

Default:

[]

warningText

Since 2.6.0

Warning text for the select component

Attribute:

warning-text

Type:

string ｜ undefined

Events

Name

Description and specifications

addItem

Item added to selection

Detail:

string

inputChange

Since 2.0.0

Event dispatched whenever the text input changes.

Detail:

string

itemSelectionChange

Deprecated

since 2.0.0. Use `valueChange` instead.

Item selection changed

Detail:

string[]

ixBlur

Blur input

Detail:

void

valueChange

Since 2.0.0

Value changed

Detail:

string | string[]

Properties (ix-select-item)

Properties

Name

Description and specifications

label

Displayed name of the item

Attribute:

label

Type:

string ｜ undefined

selected

Flag indicating whether the item is selected

Attribute:

selected

Type:

boolean

Default:

false

value

Deprecated

will be changed to type string with next major release (3.0.0)

The value of the item. Important: The select component uses string values to handle selection and will call toString() on this value. Therefor a string should be passed to value to prevent unexpected behavior.

Attribute:

value

Type:

any

Events

Name

Description and specifications

itemClick

Item clicked

Detail:

string