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

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-typeahead label="Hello"></anchor-typeahead>
</template>

<script setup>
import { AnchorTypeahead } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-typeahead label="Hello"></anchor-typeahead>
</template>

Disabled

<template>
  <anchor-typeahead disabled label="Hello"></anchor-typeahead>
</template>

Read Only

<template>
  <anchor-typeahead readonly label="Hello"></anchor-typeahead>
</template>

Required

If you pass the required property to the input, the input will be required.

<template>
  <anchor-typeahead required label="Hello"></anchor-typeahead>
</template>

Help text

You can add a helpful text to the input by passing the help-text property.

<template>
  <anchor-typeahead help-text="This is a help text" label="Hello"></anchor-typeahead>
</template>

With Error Message

You can combine the error-prop properties to show an invalid input.

<template>
  <anchor-typeahead error-prop="This is an error message" label="Hello"></anchor-typeahead>
</template>

Accessibility

• Uses role="combobox" with aria-autocomplete="list" to communicate the autocomplete behavior to assistive technology.
• The dropdown list uses role="listbox" with individual options marked as role="option", following the ARIA combobox pattern.
• Arrow key navigation moves focus through the available options, with aria-activedescendant tracking the currently focused option.
• Pressing Enter selects the focused option, collapsing the dropdown and updating the input value.
• The aria-expanded attribute reflects whether the dropdown is open or closed, and aria-controls links the input to its listbox.

API

anchor-typeahead

WORK IN PROGRESS: This component has not gone through final testing and a11y validation. It may see breaking changes in the near future based on the feedback from testing.

How to use the typeahead component

Basic typeahead

<anchor-typeahead options='["foo","bar","foobar"]' language="NO" texts='{"noResult":"The search yeilded no results"}'></anchor-typeahead>

Properties

Events

CSS Custom Properties

Dependencies

Depends on

• anchor-input
• anchor-option

Graph

graph TD;
  anchor-typeahead --> anchor-input
  anchor-typeahead --> anchor-option
  anchor-input --> anchor-form-field
  anchor-input --> anchor-icon
  anchor-input --> anchor-tooltip
  anchor-form-field --> anchor-icon
  anchor-option --> anchor-icon
  style anchor-typeahead fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS