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-input';
  defineCustomElement();
</script>
<anchor-input>Hello</anchor-input>

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  defineCustomElements();
</script>
<anchor-input>Hello</anchor-input>

Disabled

<anchor-input disabled>Hello</anchor-input>

Read Only

<anchor-input readonly>Hello</anchor-input>

Required

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

<anchor-input required>Hello</anchor-input>

Help text

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

<anchor-input help-text="This is a help text">Hello</anchor-input>

With Error Message

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

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

Label Placements

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

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

Password Input

You can use the type property to change the input type to password.

<anchor-input type="password">Password</anchor-input>

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 name 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-input

Basic text input field

<anchor-input name="text input"></anchor-input>

Text input field with label

Input fields should always have a label to help the user navigate in a form. Any text you put between the tags will be shown as the label.

<anchor-input name="text input">This is the label text </anchor-input>

Disabled text input

<anchor-input disabled></anchor-input>

or

<anchor-input disabled="true"></anchor-input>

Read only text input

<anchor-input value="Text you cannot change" readonly></anchor-input>

or

<anchor-input value="Text you cannot change" readonly="true"></anchor-input>

Input with help text

Any text provided in the 'warning' attribute, will be shown as a message below the input field, and the input field itself will have a visual warning cue.

<anchor-input help-text="Text to help or guide the user"></anchor-input>

Input with warning state

Any text provided in the 'warning' attribute, will be shown as a message below the input field, and the input field itself will have a visual warning cue.

<anchor-input value="Possibly faulty input" warning="Are you sure this is correct?"></anchor-input>

Input with error state

There are two ways of triggering the error state in the input field and showing an error message:

As a prop

Any text provided in the 'error-prop' attribute, will be shown as a message below the input field, and the input field itself will have a visual error cue.

<anchor-input value="Faulty input" error-prop="Please correct the error"></anchor-input>

or

As a slot

For more control over the message shown, you can provide html and text as a slot. You need to wrap the text and any markup in an HTML tag with the attribute: slot="error-msg". Without naming the slot as "error-msg", the content will be treated as a label.

<anchor-input value="Faulty input" readonly="true">
  <span slot="error-msg">Please correct the error</span>
</anchor-input>

Events and how to capture them

The Input component emits a couple of events that you can capture in your application.

See the exact list of events further down this page.

Input value

The 'inputevent' is the way to get the value of the Input element.

Set up an event listener or similar, and listen for the event 'inputevent'.

Here's an example using a standard javascript event listener:

document.querySelector('#anchor-input').addEventListener('inputevent', event => {
  console.log('input value', event.detail.target.value);
});

Properties

Events

Methods

focusInput(timeout?: number) => Promise<void>

Parameters

Returns

Type: Promise<void>

CSS Custom Properties

Dependencies

Used by

• anchor-number
• anchor-phone
• anchor-quantity
• anchor-typeahead

Depends on

• anchor-label
• anchor-icon
• anchor-tooltip

Graph

Built with StencilJS