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

npm i @tryg/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

YourComponent.vue

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

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorSelect } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-select options='["Option 1", "Option 2", "Option 3", "Option 4" ]' label="Select"></anchor-select>
</template>

Option formatting

YourComponent.vue

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

Disabled

YourComponent.vue

<template>
  <anchor-select options='[]' disabled label="Select"></anchor-select>
</template>

Selected item

YourComponent.vue

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

CSS variables

The following CSS custom properties are exposed:

Variable	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

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

Select

anchor-select

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`
`required`	`required`	Mark the field as required	`boolean`	`false`
`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`
`validityMissingValueText`	`validity-missing-value-text`	Text to be displayed if when value is missing an native form validation is used	`string`	`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
`--select-background-color-list`	Set the background color of the 's dropdown list, defaults to the same as the select
`--select-border-color`	Set the border color of the
`--select-border-color-disabled`	Set the disabled border color of the
`--select-border-color-error`	Set the error border color of the
`--select-border-color-focus`	Set the focus border color of the
`--select-border-color-hover`	Set the hover border color of the
`--select-border-color-readonly`	Set the readonly border color of the
`--select-border-color-warning`	Set the warning border color of the
`--select-border-radius`	Set the border radius of the
`--select-border-width`	Set the border width of the
`--select-border-width-error`	Set the border width of the in case of an error
`--select-font-family`	Set the font-family of the
`--select-list-offset`	Set the offset of the dropdown list
`--select-message-gap`	Set the message gap of the
`--select-text-color`	Set the text color of the
`--select-text-color-disabled`	Set the text color of the when disabled
`--select-text-color-expanded`	Set the text color of the when the dropdown is expanded
`--select-z-index`	Set the z index of the 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

Built with StencilJS

Select Item

AnchorSelectItem is used inside an AnchorSelect to define individual options. It supports icons, descriptions, disabled state, and selection tracking.

Property	Attribute	Description	Type	Default
`value`	`value`	Value assigned to this SelectItem	`string \| { value: string; label?: string; description: string }`	`undefined`
`description`	`description`	Description text for this item	`string`	`undefined`
`disabled`	`disabled`	Whether this item is disabled	`boolean`	`false`
`selected`	`selected`	Whether this item is already selected	`boolean`	`false`
`icon`	`icon`	Icon to show inside the item	`IconName`	`undefined`
`readonly`	`readonly`	Whether this item is readonly	`boolean`	`false`

Events: @pressed, @next, @previous

anchor-select-item

Properties

Property	Attribute	Description	Type	Default
`description`	`description`	Value to assigned to this particular SelectItem that will be emitted with the event when its selected	`string`	`undefined`
`disabled`	`disabled`	Value indicating whether or not this particular SelectItem should be disabled from selecting	`boolean`	`false`
`focused`	`focused`	Value indicating whether or not this particular SelectItem is already selected	`boolean`	`false`
`icon`	`icon`	Value indicating an icon to be shown inside of the SelectItem	"activity" \| "airplay" \| "alarm" \| "alert-circle" \| "alert-octagon" \| "alert-triangle" \| "align-center" \| "align-justify" \| "align-left" \| "align-right" \| "anchor" \| "aperture" \| "archive" \| "arrow-down" \| "arrow-down-circle" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-left-circle" \| "arrow-right" \| "arrow-right-circle" \| "arrow-up" \| "arrow-up-circle" \| "arrow-up-left" \| "arrow-up-right" \| "at-sign" \| "award" \| "band-aid" \| "bar-chart" \| "bar-chart-2" \| "basket" \| "battery" \| "battery-charging" \| "bell" \| "bell-off" \| "bluetooth" \| "bold" \| "bonus-tryghedsgruppen" \| "book" \| "book-open" \| "bookmark" \| "box" \| "briefcase" \| "calculator" \| "calendar" \| "camera" \| "camera-off" \| "cast" \| "check" \| "check-circle" \| "check-square" \| "chevron-down" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "child" \| "chrome" \| "circle" \| "clipboard" \| "clock" \| "cloud" \| "cloud-drizzle" \| "cloud-lightning" \| "cloud-off" \| "cloud-rain" \| "cloud-snow" \| "code" \| "codepen" \| "codesandbox" \| "coffee" \| "columns" \| "command" \| "company" \| "compass" \| "copy" \| "corner-down-left" \| "corner-down-right" \| "corner-left-down" \| "corner-left-up" \| "corner-right-down" \| "corner-right-up" \| "corner-up-left" \| "corner-up-right" \| "cpu" \| "credit-card" \| "crop" \| "crosshair" \| "database" \| "delete" \| "disc" \| "divide" \| "divide-circle" \| "divide-square" \| "dollar-sign" \| "download" \| "download-cloud" \| "dribbble" \| "droplet" \| "edit" \| "edit-2" \| "edit-3" \| "external-link" \| "eye" \| "eye-off" \| "facebook" \| "fast-forward" \| "feather" \| "figma" \| "file" \| "file-minus" \| "file-pdf" \| "file-plus" \| "file-text" \| "film" \| "filter" \| "flag" \| "folder" \| "folder-minus" \| "folder-plus" \| "framer" \| "frown" \| "gift" \| "git-branch" \| "git-commit" \| "git-merge" \| "git-pull-request" \| "github" \| "gitlab" \| "globe" \| "grid" \| "hard-drive" \| "hash" \| "headphones" \| "heart" \| "help-circle" \| "hexagon" \| "home" \| "image" \| "inbox" \| "info" \| "instagram" \| "italic" \| "key" \| "layers" \| "layout" \| "life-buoy" \| "link" \| "link-2" \| "linkedin" \| "list" \| "loader" \| "lock" \| "log-in" \| "log-out" \| "mail" \| "map" \| "map-pin" \| "maximize" \| "maximize-2" \| "megaphone" \| "meh" \| "menu" \| "message-circle" \| "message-square" \| "mic" \| "mic-off" \| "minimize" \| "minimize-2" \| "minus" \| "minus-circle" \| "minus-square" \| "monitor" \| "moon" \| "more-horizontal" \| "more-vertical" \| "mouse-pointer" \| "move" \| "music" \| "navigation" \| "navigation-2" \| "octagon" \| "offer" \| "package" \| "paperclip" \| "pause" \| "pause-circle" \| "pen-tool" \| "percent" \| "phone" \| "phone-call" \| "phone-forwarded" \| "phone-incoming" \| "phone-missed" \| "phone-off" \| "phone-outgoing" \| "pie-chart" \| "play" \| "play-circle" \| "plus" \| "plus-circle" \| "plus-square" \| "pocket" \| "power" \| "printer" \| "radio" \| "refresh-ccw" \| "refresh-cw" \| "repeat" \| "rewind" \| "rotate-ccw" \| "rotate-cw" \| "rss" \| "save" \| "scissors" \| "search" \| "send" \| "server" \| "settings" \| "share" \| "share-2" \| "shield" \| "shield-off" \| "shopping-bag" \| "shopping-cart" \| "shuffle" \| "sidebar" \| "skip-back" \| "skip-forward" \| "slack" \| "slash" \| "sliders" \| "smartphone" \| "smile" \| "speaker" \| "sprout" \| "square" \| "star" \| "star-filled" \| "stop-circle" \| "storm" \| "sun" \| "sunrise" \| "sunset" \| "table" \| "tablet" \| "tag" \| "target" \| "terminal" \| "thermometer" \| "thumbs-down" \| "thumbs-up" \| "toggle-left" \| "toggle-right" \| "tool" \| "trash" \| "trash-2" \| "trello" \| "trending-down" \| "trending-up" \| "triangle" \| "truck" \| "trygfonden" \| "tv" \| "twitch" \| "twitter" \| "type" \| "umbrella" \| "underline" \| "unlock" \| "upload" \| "upload-cloud" \| "user" \| "user-check" \| "user-minus" \| "user-plus" \| "user-x" \| "users" \| "video" \| "video-off" \| "voicemail" \| "volume" \| "volume-1" \| "volume-2" \| "volume-x" \| "watch" \| "wifi" \| "wifi-off" \| "wind" \| "x" \| "x-circle" \| "x-octagon" \| "x-square" \| "youtube" \| "zap" \| "zap-off" \| "zoom-in" \| "zoom-out"	`undefined`
`itemId`	`item-id`	Unique identificator for this DOM node	`string`	`undefined`
`readonly`	`readonly`	Value indicating whether or not this particular SelectItem should be readonly	`boolean`	`false`
`selected`	`selected`	Value indicating whether or not this particular SelectItem is already selected	`boolean`	`false`
`value`	`value`	Value to assigned to this particular SelectItem that will be emitted with the event when its selected	`string \| { value: string; label?: string; description: string; }`	`undefined`

Events

Event	Description	Type
`next`	Event emitted when attempting to navigate to the next SelectItem	`CustomEvent<any>`
`pressed`	Event emitted when a SelectItem is pressed	`CustomEvent<any>`
`previous`	Event emitted when attempting to navigate to the previous SelectItem	`CustomEvent<any>`

Methods

`emitSelectedEvent(e?: any) => Promise<void>`

Parameters

Name	Type	Description
`e`	`any`

Returns

Type: Promise<void>

CSS Custom Properties

Name	Description
`--select-item-background-color`	Set the background color of the
`--select-item-background-color-disabled`	Set the background color of the when disabled
`--select-item-background-color-hover`	Set the background color of the when hovered
`--select-item-background-color-pressed`	Set the background color of the when pressed
`--select-item-border-color`	Set the border color of the
`--select-item-border-color-disabled`	Set the border color of the when disabled
`--select-item-border-color-divider`	Set the border color of the divider
`--select-item-border-color-divider-disabled`	Set the border color of the divider when disabled
`--select-item-border-color-divider-hover`	Set the border color of the divider when hovered
`--select-item-border-color-divider-pressed`	Set the border color of the divider when pressed
`--select-item-border-color-hover`	Set the border color of the when hovered
`--select-item-border-color-pressed`	Set the border color of the when pressed
`--select-item-border-radius`	Set the border radius of the
`--select-item-border-width`	Set the border width of the
`--select-item-border-width-focus`	Set the border width of the when focused
`--select-item-cursor`	Set the cursor of the
`--select-item-cursor-disabled`	Set the cursor of the when disabled
`--select-item-cursor-pressed`	Set the cursor of the when pressed
`--select-item-font-family`	Set the font family of the
`--select-item-font-size`	Set the font size of the
`--select-item-font-weight`	Set the font weight of the
`--select-item-line-height`	Set the line height of the
`--select-item-line-height-inside`	Set the line height inside of the
`--select-item-padding`	Set the padding of the
`--select-item-text-color`	Set the text color of the
`--select-item-text-color-disabled`	Set the text color of the when disabled
`--select-item-text-color-hover`	Set the text color of the when hovered
`--select-item-text-color-pressed`	Set the text color of the when pressed
`--select-item-width`	Set the width of the

Dependencies

Used by

anchor-phone

Depends on

anchor-icon

Graph

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

Built with StencilJS

Select3.0

On this page