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-toggle>Toggle label</anchor-toggle>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorToggle } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-toggle>Toggle label</anchor-toggle>
</template>

Checked

Vue component

<template>
  <anchor-toggle checked>Toggle label</anchor-toggle>
</template>

Disabled

Vue component

<template>
  <anchor-toggle disabled>Toggle label</anchor-toggle>
</template>

Slots

base: Checkbox wrapper, it handles alignment, placement, and general appearance.
wrapper: An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states.
icon: Icon within the checkbox, controlling size, visibility, and changes when checked.
label: The text associated with the checkbox.

Accessibility

Built with a native HTML <input> element.
Full support for browser features like form autofill.
Keyboard focus management and cross browser normalization.
Keyboard event support for Tab, Enter and Space keys.
Labeling support for assistive technology.
Indeterminate state support.

API

anchor-toggle

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`	If `true` the toggle will be checked	`boolean`	`false`
`disabled`	`disabled`	If `true` the user cannot interact with the toggle	`boolean`	`false`
`inputId`	`input-id`	The id of the input field	`string`	`anchor-toggle-${generateGuid()}`
`name`	`name`	The name of the control, which is submitted with the form data.	`string`	`this.inputId`
`required`	`required`	If `true` the toggle is marked as required	`boolean`	`false`
`validityMissingValueText`	`validity-missing-value-text`	Text to be displayed if when value is missing an native form validation is used	`string`	`undefined`
`value`	`value`	The value of the toggle component. It does not control if its checked or not. Use `checked` for that.	`string`	`'on'`

Events

Event	Description	Type
`toggled`		`CustomEvent<ToggleEventDetail>`

Methods

`toggleInput(event?: any) => Promise<void>`

Parameters

Name	Type	Description
`event`	`any`

Returns

Type: Promise<void>

Dependencies

Depends on

anchor-label

Graph

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

Built with StencilJS

Anchor version	Status	Notes
3.0	Ready for Implementation	This component is in sync with Figma.

Toggle3.0