Option4.0
Options represent individual selectable items within a select component.
Ads by Tryg Careers
Installation
npm i @tryg/vue-ui-libraryUsage
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-option value="option-1" item-id="item-1">Option 1</anchor-option>
</template>Import only the components you need for optimal bundle size.
<script setup>
import { AnchorOption } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-option value="option-1" item-id="item-1">Option 1</anchor-option>
</template>Label
Pass the label prop to provide a descriptive label for the option. If omitted, it falls back to using the value prop.
<template>
<anchor-option value="opt-1" item-id="item-1" label="Display Label">Display Label</anchor-option>
</template>Description
Pass the description prop to provide additional context for the option. The description is rendered below the label.
<template>
<anchor-option value="opt-2" item-id="item-2" label="Option with description" description="An optional extra description">Option with description</anchor-option>
</template>Disabled
Pass the disabled prop to prevent users from selecting an option.
<template>
<anchor-option value="opt-3" item-id="item-3" disabled>Disabled Option</anchor-option>
</template>With Icon
Pass the icon prop to display an icon alongside the option label.
<template>
<anchor-option value="opt-4" item-id="item-4" icon="heart">Option with Icon</anchor-option>
</template>Shadow Parts
| Part | Description |
|---|---|
"option" | The option element |
CSS variables
The following CSS custom properties are exposed:
| Variable | Description |
|---|---|
--option-background-color | Set the background color of the <anchor-option> |
--option-background-color-disabled | Set the background color of the <anchor-option> when disabled |
--option-background-color-hover | Set the background color of the <anchor-option> on hover |
--option-background-color-pressed | Set the background color of the <anchor-option> when pressed |
--option-border-bottom-width | Set the border bottom width of the <anchor-option> |
--option-border-color | Set the border color of the <anchor-option> |
--option-border-color-disabled | Set the border color of the <anchor-option> when disabled |
--option-border-color-hover | Set the border color of the <anchor-option> on hover |
--option-border-color-pressed | Set the border color of the <anchor-option> when pressed |
--option-border-radius | Set the border radius of the <anchor-option> |
--option-border-width | Set the border width of the <anchor-option> |
--option-border-width-focus | Set the border width of the <anchor-option> on focus |
--option-color | Set the color of the <anchor-option> |
--option-color-hover | Set the color of the <anchor-option> on hover |
--option-color-pressed | Set the color of the <anchor-option> when pressed |
--option-cursor | Set the cursor of the <anchor-option> |
--option-cursor-disabled | Set the cursor of the <anchor-option> when disabled |
--option-cursor-pressed | Set the cursor of the <anchor-option> when pressed |
--option-font-family | Set the font-family of the <anchor-option> |
--option-font-size | Set the font size of the <anchor-option> |
--option-font-weight | Set the font weight of the <anchor-option> |
--option-line-height | Set the line height of the <anchor-option> |
--option-line-height-inside | Set the line height inside of the <anchor-option> |
--option-padding | Set the padding of the <anchor-option> |
--option-width | Set the width of the <anchor-option> |
Accessibility
- Supports
ariaLabelfor providing accessible names to assistive technologies. - Disabled options are communicated to screen readers.
- Works in conjunction with the Select component for full keyboard navigation support.
API
anchor-option
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
ariaLabel | aria-label | aria-label for the item | string | undefined |
description | description | An optional extra description for the option. This is rendered below the label | string | undefined |
disabled | disabled | Value indicating whether or not this particular option should be disabled from selecting | boolean | false |
focused | focused | A value indicating whether the option has focus or not, will be used to set a class and apply focused styling. | boolean | undefined |
icon | icon | Value indicating an icon to be shown inside of the option | "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 (required) | item-id | Unique identificator for this DOM node | string | undefined |
label | label | A descriptive label for the option. This is what the end user will see. If this field is omitted it will fall back to use the value. | string | undefined |
selected | selected | A value indicating whether the option is the selected option, will be used to set a class and apply focused styling. | boolean | undefined |
value (required) | value | Value of the option. This is a unique identifier for the option that is not visible to the end user | string | undefined |
Shadow Parts
| Part | Description |
|---|---|
"option" |
CSS Custom Properties
| Name | Description |
|---|---|
--option-background-color | Set the background color of the |
--option-background-color-disabled | Set the background color of the |
--option-background-color-hover | Set the background color of the |
--option-background-color-pressed | Set the background color of the |
--option-border-bottom-width | Set the border bottom width of the |
--option-border-color | Set the border color of the |
--option-border-color-disabled | Set the border color of the |
--option-border-color-hover | Set the border color of the |
--option-border-color-pressed | Set the border color of the |
--option-border-radius | Set the border radius of the |
--option-border-width | Set the border width of the |
--option-border-width-focus | Set the border width of the |
--option-color | Set the color of the |
--option-color-hover | Set the color of the |
--option-color-pressed | Set the color of the |
--option-cursor | Set the cursor of the |
--option-cursor-disabled | Set the cursor of the |
--option-cursor-pressed | Set the cursor of the |
--option-description-font-size | Set the font size of the |
--option-font-family | Set the font-family of the |
--option-font-size | Set the font size of the |
--option-font-weight | Set the font weight of the |
--option-line-height | Set the line height of the |
--option-line-height-inside | Set the line height inside of the |
--option-padding | Set the padding of the |
--option-width | Set the width of the |
Dependencies
Used by
Depends on
Graph
graph TD;
anchor-option --> anchor-icon
anchor-autocomplete --> anchor-option
anchor-select --> anchor-option
anchor-typeahead --> anchor-option
style anchor-option fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS