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.

type

Different types are available for uwc-input. They try to mimic the behavior of the native input as best as they can but with a few niceties here and there

text

A plain and simple text input

number

A number input

date

A date input. Uses uwc-datepicker internally

checkbox

A checkbox

disabled

uwc-input can also be disabled like any other input

invalid

uwc-input implements the validation API

It's also possible to customize the error message, simply by specifying the message for the corresponding validity state in kebab-case. See Validity States on MDN

You can even set the severity of a validation by appending -severity to the corresponding validity state flag. The following example errors when no value is present but only warns for more than 2 characters

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 div[part=content] and specify the available suggestions in a ul with each suggestion wrapped in a 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

Forms API

Of course uwc-input also integrates with HTML forms

Date

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.

Radio

uwc-input type Radio in a form