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/ui-library

Usage

<script type="module">
  import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-number';
  defineCustomElement();
</script>
<anchor-number name="number-field" max-length="100" >Write a number</anchor-number>

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  defineCustomElements();
</script>
<anchor-number name="number-field" max-length="100" >Write a number</anchor-number>

Disabled

<anchor-number name="number-field" disabled>Write a number</anchor-number>

Read Only

<anchor-number name="number-field" readonly>Write a number</anchor-number>

Required

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

<anchor-number name="number-field" required>Write a number</anchor-number>

Help text

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

<anchor-number name="number-field" help-text="This is a help text">Write a number</anchor-number>

With Error Message

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

<anchor-number name="number-field" error-prop="This is a error message">Write a number</anchor-number>

Message Placements

You can change the position of the label by setting the messagePlacement property to inside, or below.

<anchor-number error-prop="This is a error message">Hello</anchor-number>

Controlled

You can use the value and onValueChange properties to control the input value.

<script type="text/javascript">
  window.addEventListener("load", (event) => {
    document.querySelector('anchor-input').addEventListener('inputevent', function(data) {
      document.querySelector('#input-preview').innerHTML = data.detail.value
    })
  });
</script>
<anchor-input>Your number please</anchor-input>
<div id="input-preview"></div>

Accessibility

• Built with a native <input> element.
• Visual and ARIA labeling support.
  • aria-live attribute for the input field.
  • aria-describedby attribute for the input field.
  • aria-activedescendant attribute for the input field.
• Change, clipboard, composition, selection, and input event support.
• Required and invalid states exposed to assistive technology via ARIA.
  • aria-required attribute automatically set if required prop is set.
  • aria-invalid attribute automatically set if error-prop prop is set.
• Support for description and error message help text linked to the input via ARIA.

API

anchor-number

Properties

Events

CSS Custom Properties

Dependencies

Depends on

• anchor-icon
• anchor-input

Graph

Built with StencilJS