@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