uwc-input

This highlights common use-cases/recipes for using uwc-input. To see how these examples work it's beneficial to open the dev tools now and check the structure of each example.
Most of the time you should be able to use it without any additional JS and for the times where JS really is necessary Hyperscript is a perfect match, enabling you to embed scripts into the _ property of an element.

Text

A plain and simple text input

disabled

uwc-input can also be disabled like any other input

Localized numbers

Since regular inputs tend to be somewhat sketchy regarding localization uwc-input tries to ameliorate this by retrieving the nearest lang attribute

Localized dates

date inputs are also localized according to the nearest lang attribute

Custom styling

uwc-input can be styled like any other element because it doesn't use the shadow DOM

Autocomplete

uwc-input can also easily be used as an autocomplete. Just insert a menu specifying the available li.

Specifying suggestions

By default the data-value attribute will be used as the value of an li. If none is provided, the text content is treated as the value.

  • First
  • Second
  • Third
  • Fourth