The input component (lk-input)…
Example short hint that is only a single paragraph.
Example longer hint that spans multiple paragraphs. This line is going to be a little bit longer so that it eventually wraps onto a new line.
This is the second line.
The input can be made smaller by using the compact prop.
By setting the `type` prop to `number`, we are able to limit the input so that it only accepts number characters.
By setting the `type` prop to `password`, the input will obscure the content of the input.
Example short hint.
Example error message.
This is the second line of the error message.
If we want to place the input inline with other content then we can use the display prop with a value of inline-block.
The Input component implements the margin-bottom is set to content.
There are times when we want to be able to give more context to an input by using text or an icon as a prefix or suffix, a good example being using a currency symbol as a prefix. We can do this using the prefix and/or suffix slots.
The prop focus-on-show can be used to focus the input when it is first created and shown.
An alternative approach is to manually focus the input, as is demonstrated in the example below:
The blur event occurs when the input element loses focus. You can attache a method to run when a blur event occurs.
The has-clear-option will add a cross to the right hand side of the box. When clicked it will clear any text in the box.
There are times when we want to have additional actions that can be used in conjunction with an input box. The Action Item provides the ability to add a custom action, for example a drop down menu or button.
We can acheive this using the show-action-items and/or action slots.