@cas-smartdesign/lit-input

An input element based on LitElement & material components.

Requirements

The main entry point requires ES6 & support for Custom Elements v1

Properties and attributes

• label: string;
  • The label of the input
• sdAriaLabel: string;
  • The aria-label of the input that is used by the screen readers
• currentText: string;
  • The current text of the input element
• alwaysFloatLabel: boolean;
  • A flag which indicates whether the label should always be "floated" above the input
• autocompleted: boolean;
  • A flag which indicates whether the browser's autocompletion was executed
• rows: number;
  • If greater than 1, a textarea element is used instead of an input element
• type: string (default="text")
  • The type of the input element
• placeholder: string;
  • The placeholder text to be used
• maxlength: number;
  • The maximum length of the text which is allowed to be entered
• disabled: boolean;
  • Defines whether the input is disabled. Note that it uses aria-disabled and readonly attributes, thus allowing pointer/mouse events.
• readonly: boolean;
  • Defines whether the input should be read only.
• required: boolean;
  • Defines whether the input should be required.
• name: string;
  • Defines the name attribute on the element.
• inactive: boolean;
  • Renders the input element disabled, without the top level sd-lit-input being set to disabled
• extendedPrefix: boolean;
  • If set, the positioning of the prefixed (& also the suffix) content is changed in a way that the internal input field occupies space only in a focused state. With this the prefixed content can have an extended layouting, for example if tokens need to be shown in that position.

Custom events

• value-change
  • This event is dispatched when the value is changed because of a user interaction

Validation

The element could show validation messages via an sd-field-validation-message element which can be configured with the following attributes & properties which are all delegated to that:

• validationMessage
• validationIconSrc
• validationLevel