Select Item3.0
AnchorSelectItem is used inside an AnchorSelect component to define individual dropdown options with support for icons, descriptions, disabled state, and selection tracking.
Ads by Tryg Careers
Installation
npm i @tryg/vue-ui-libraryUsage
AnchorSelectItem defines individual options inside an AnchorSelect dropdown.
<template>
<anchor-select>
<anchor-select-item value="option1">Option 1</anchor-select-item>
<anchor-select-item value="option2">Option 2</anchor-select-item>
<anchor-select-item value="option3">Option 3</anchor-select-item>
</anchor-select>
</template>Install the component library as a Vue plugin. This globally registers all Anchor components.
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');<template>
<anchor-select>
<anchor-select-item value="option1">Option 1</anchor-select-item>
<anchor-select-item value="option2">Option 2</anchor-select-item>
<anchor-select-item value="option3">Option 3</anchor-select-item>
</anchor-select>
</template>Import only the components you need for optimal bundle size.
<script setup>
import { AnchorSelect, AnchorSelectItem } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-select>
<anchor-select-item value="option1">Option 1</anchor-select-item>
<anchor-select-item value="option2">Option 2</anchor-select-item>
<anchor-select-item value="option3">Option 3</anchor-select-item>
</anchor-select>
</template>With Description
Pass the description prop to display additional context text below the item label.
<template>
<anchor-select>
<anchor-select-item value="option1" description="Standard processing">Option 1</anchor-select-item>
<anchor-select-item value="option2" description="Priority processing">Option 2</anchor-select-item>
</anchor-select>
</template>With Icon
Pass the icon prop to display an icon inside the select item.
<template>
<anchor-select>
<anchor-select-item icon="user" value="user">User</anchor-select-item>
<anchor-select-item icon="settings" value="settings">Settings</anchor-select-item>
<anchor-select-item icon="shield" value="security">Security</anchor-select-item>
</anchor-select>
</template>Disabled
Pass the disabled prop to prevent users from selecting a particular item.
<template>
<anchor-select>
<anchor-select-item value="option1">Option 1</anchor-select-item>
<anchor-select-item value="option2" disabled>Option 2</anchor-select-item>
<anchor-select-item value="option3">Option 3</anchor-select-item>
</anchor-select>
</template>Selected
Pass the selected prop to indicate which item is currently selected.
<template>
<anchor-select>
<anchor-select-item value="option1">Option 1</anchor-select-item>
<anchor-select-item value="option2" selected>Option 2</anchor-select-item>
<anchor-select-item value="option3">Option 3</anchor-select-item>
</anchor-select>
</template>CSS variables
With CSS variables you can easily customize the appearance of select items.
| Name | Description |
|---|---|
--select-item-background-color | Background color of the select item |
--select-item-background-color-disabled | Background color when disabled |
--select-item-background-color-hover | Background color when hovered |
--select-item-background-color-pressed | Background color when pressed |
--select-item-text-color | Text color of the select item |
--select-item-text-color-disabled | Text color when disabled |
--select-item-text-color-hover | Text color when hovered |
--select-item-text-color-pressed | Text color when pressed |
--select-item-border-color | Border color of the select item |
--select-item-border-color-disabled | Border color when disabled |
--select-item-border-color-hover | Border color when hovered |
--select-item-border-color-pressed | Border color when pressed |
--select-item-border-radius | Border radius of the select item |
--select-item-border-width | Border width of the select item |
--select-item-padding | Padding of the select item |
--select-item-width | Width of the select item |
--select-item-font-family | Font family of the select item |
--select-item-font-size | Font size of the select item |
--select-item-font-weight | Font weight of the select item |
--select-item-cursor | Cursor style of the select item |
--select-item-cursor-disabled | Cursor style when disabled |
Accessibility
The AnchorSelectItem component is designed to work seamlessly within the AnchorSelect dropdown to provide an accessible selection experience:
- Keyboard navigation: Use Arrow Up and Arrow Down to navigate between select items within the dropdown. Press Enter or Space to select the focused item.
- ARIA attributes: Each item receives appropriate
aria-selectedattributes to communicate selection state to assistive technologies. - Focus management: Visual focus indicators are provided on keyboard navigation. The
focusedprop tracks the currently focused item. - Disabled state: Disabled items are announced as disabled to screen readers and are skipped during keyboard navigation.
API
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 |
--select-item-background-color-hover | Set the background color of the |
--select-item-background-color-pressed | Set the background color of the |
--select-item-border-color | Set the border color of the |
--select-item-border-color-disabled | Set the border color of the |
--select-item-border-color-divider | Set the border color of the |
--select-item-border-color-divider-disabled | Set the border color of the |
--select-item-border-color-divider-hover | Set the border color of the |
--select-item-border-color-divider-pressed | Set the border color of the |
--select-item-border-color-hover | Set the border color of the |
--select-item-border-color-pressed | Set the border color of the |
--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 |
--select-item-cursor | Set the cursor of the |
--select-item-cursor-disabled | Set the cursor of the |
--select-item-cursor-pressed | Set the cursor of the |
--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 |
--select-item-text-color-hover | Set the text color of the |
--select-item-text-color-pressed | Set the text color of the |
--select-item-width | Set the width of the |
Dependencies
Used by
Depends on
Graph
graph TD;
anchor-select-item --> anchor-icon
anchor-phone --> anchor-select-item
style anchor-select-item fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
| Anchor version | Status | Notes |
|---|---|---|
| 3.0 | Ready for Implementation | This component is in sync with Figma. |