Select

We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

Usage

Webcomponent

<anchor-select options="[]"></anchor-select>

Option formatting

Webcomponent with options

<anchor-select options='["Option 1", "Option 2", "Option 3", "Option 4" ]'>Select</anchor-select>

Disabled

Webcomponent disabled

<anchor-select options="[]" disabled></anchor-select>

Selected item

Webcomponent

<anchor-select options="['Option 1','Option 2','Option 3']" selectedIndex="2"></anchor-select>

Accessibility

The component is designed to work with both mouse and keyboard navigation, and to be compliant with the Anchor accessibility guidelines.

Avoid very long option names to facilitate understanding and perception.
Don't use the same word or phrase at the beginning of a set of options.
Avoid options that contain headings and interactive elements such as links, buttons or checkboxes.
If the dropdown is a required field include the aria-required property and indicate that it is a required field.

API

Properties

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	Value indicating whether or not this particular SelectItem should be disabled from selecting	`boolean`	`false`
`error`	`error`	Boolean value indicating whether or not this particular SelectItem should display an error message	`boolean`	`false`
`expanded`	`expanded`	Value indicating whether or not the DropDown select should be expanded	`boolean`	`false`
`initialValue`	`initial-value`	Values to be shown in the DropDown select	`string`	`'- Select a value -'`
`options`	`options`	Values to be shown in the DropDown select	`OptionValue[] \| string \| string[]`	`undefined`
`selectId`	`select-id`	Unique identificator for this DOM node. Default generated by uuidv4.	`string`	`uuidv4()`
`selectedIndex`	`selected-index`	The index of the item which should be pre-selected - defaults to the first item in the Array	`number`	`undefined`
`selectedItem`	`selected-item`	[DEPRECATED] use selectedIndex instead. This has the same functionality, but a better name. This field will be removed 23.12.23	`number`	`undefined`

Events

Event	Description	Type
`collapse`	Event emitted when the dropdown select collapses	`CustomEvent<any>`
`expand`	Event emitted when the dropdown select expands	`CustomEvent<any>`
`selected`	Event emitted when an select-item is selected - containing the value of that select-item	`CustomEvent<any>`

Methods

`collapseComponent(e?: any) => Promise<CustomEvent<any>>`

Parameters

Name	Type	Description
`e`	`any`

Returns

Type: Promise<CustomEvent<any>>

`expandAndFocus() => Promise<boolean>`

Returns

Type: Promise<boolean>

`expandComponent(e?: any) => Promise<CustomEvent<any>>`

Parameters

Name	Type	Description
`e`	`any`

Returns

Type: Promise<CustomEvent<any>>

`focusFirst() => Promise<boolean>`

Returns

Type: Promise<boolean>

`focusLast() => Promise<boolean>`

Returns

Type: Promise<boolean>

`handleNext(e: any) => Promise<boolean>`

Parameters

Name	Type	Description
`e`	`any`

Returns

Type: Promise<boolean>

`handlePressed(e: MouseEvent, index: number) => Promise<CustomEvent<any>>`

Parameters

Name	Type	Description
`e`	`MouseEvent`
`index`	`number`

Returns

Type: Promise<CustomEvent<any>>

`handlePrevious(e: any) => Promise<boolean>`

Parameters

Name	Type	Description
`e`	`any`

Returns

Type: Promise<boolean>

`selectAndCollapse(index: number) => Promise<CustomEvent<any>>`

Parameters

Name	Type	Description
`index`	`number`

Returns

Type: Promise<CustomEvent<any>>

`setFocus(index?: number) => Promise<boolean>`

Parameters

Name	Type	Description
`index`	`number`

Returns

Type: Promise<boolean>

`setSelect(index: number) => Promise<CustomEvent<any>>`

Parameters

Name	Type	Description
`index`	`number`

Returns

Type: Promise<CustomEvent<any>>

CSS Custom Properties

Name	Description
`--select-background-color`	Set the background color of the `anchor-select`
`--select-background-color-list`	Set the background color of the `anchor-select`'s dropdown list, defaults to the same as the select
`--select-border-color`	Set the border color of the `anchor-select`
`--select-border-color-disabled`	Set the disabled border color of the `anchor-select`
`--select-border-color-error`	Set the error border color of the `anchor-select`
`--select-border-color-focus`	Set the focus border color of the `anchor-select`
`--select-border-color-hover`	Set the hover border color of the `anchor-select`
`--select-border-color-readonly`	Set the readonly border color of the `anchor-select`
`--select-border-color-warning`	Set the warning border color of the `anchor-select`
`--select-border-radius`	Set the border radius of the `anchor-select`
`--select-border-width`	Set the border width of the `anchor-select`
`--select-border-width-error`	Set the border width of the `anchor-select` in case of an error
`--select-font-family`	Set the font-family of the `anchor-select`
`--select-list-offset`	Set the offset of the `anchor-select` dropdown list
`--select-message-gap`	Set the message gap of the `anchor-select`
`--select-text-color`	Set the text color of the `anchor-select`
`--select-text-color-disabled`	Set the text color of the `anchor-select` when disabled
`--select-text-color-expanded`	Set the text color of the `anchor-select` when the dropdown is expanded
`--select-z-index`	Set the z index of the `anchor-select` dropdown

Dependencies

Depends on

Graph

graph TD;
  anchor-select --> anchor-label
  anchor-select --> anchor-icon
  anchor-select --> anchor-option
  anchor-option --> anchor-icon
  style anchor-select fill:#f9f,stroke:#333,stroke-width:4px

On this page