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-label>Label text</anchor-label>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorLabel } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-label>Label text</anchor-label>
</template>

Pass the for prop to associate the label with a form control. The value should match the id attribute of the target input element. If the input is nested inside the label, this prop can be omitted.

Vue component

<template>
  <anchor-label for="my-input">Associated label</anchor-label>
</template>

Slots

Default: The text content of the label.

Accessibility

Properly associates form controls with their labels using the for attribute.
When an input is nested inside the label, the association is implicit and no for attribute is needed.
Screen readers announce the label text when users focus the associated control.

API

anchor-label

Properties

Property	Attribute	Description	Type	Default
`for`	`for`	Match this with an input id to create a label + input pair. Leave this field empty or unset if the input field is nested inside the label	`string`	`null`

Dependencies

Used by

Graph

graph TD;
  anchor-checkbox --> anchor-label
  anchor-progress-bar --> anchor-label
  anchor-progress-indicator --> anchor-label
  anchor-progress-indicator-step --> anchor-label
  anchor-quantity --> anchor-label
  anchor-radio --> anchor-label
  anchor-select --> anchor-label
  anchor-textarea --> anchor-label
  anchor-toggle --> anchor-label
  style anchor-label fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Label4.0