The "text" variant of an <uwc-input> can be constructed
by setting the [type] attribute to "text".
It is also the default type.
You can do quite a lot with this type and below you'll find common patterns
to use this element with.
Simple text input
Example
Disabled input
Custom popup
It is possible to add a popup that is anchored to the input element
by specifying a dialog[popover] child.
This can - for example - be used to implement comboboxes.
A combobox generally allows you to type a value (and act on that) while
associating it with content in a popup next to it.
Note that everything in the popup that counts as a value element
can be selected.
Example
Select
If you don't want your users to be able to type some arbitrary values but
to select from a "curated" list you can hide the root element.
Note that you can still type some text and the highlighted suggestion will
be selected according to a (exact) text match.
Example
Adding arbitrary content
You can add content like icons and other stuff before or after
the root element by specifying the initial "mountpoint" for the
root element with a [part=root] element.
E.g. to add a "clear" button at the end:
Example
Controlling where selected values go with ul[part=values]
You can also control where selected values are added by specifying a
ul[part=values] element.
This can also be used to specify initial values if desired.
Example
Customizing how multiple values are displayed
By providing a template inside the ul[part=values] element
it is possible to specify how selected values are rendered.
In short, there are three things to consider:
data-value - or the text content of a li element if not specified - is
what's going to be what's added to the form data.
data-label - or the text content of a li element if not specified - is
what's going to be placed in unnamed slots.
data-slot-attributes can be used to copy attributes from the selected element
inside the popup to the new element in ul[part=values]
The "text" variant of an
<uwc-input>can be constructed by setting the[type]attribute to"text".It is also the default type.
You can do quite a lot with this type and below you'll find common patterns to use this element with.
Simple text input
Example
Disabled input
Custom popup
It is possible to add a popup that is anchored to the input element by specifying a
dialog[popover]child.This can - for example - be used to implement comboboxes. A combobox generally allows you to type a value (and act on that) while associating it with content in a popup next to it.
For more details see WAI Combobox pattern
Note that everything in the popup that counts as a value element can be selected.
Example
Select
If you don't want your users to be able to type some arbitrary values but to select from a "curated" list you can hide the root element.
Note that you can still type some text and the highlighted suggestion will be selected according to a (exact) text match.
Example
Adding arbitrary content
You can add content like icons and other stuff before or after the root element by specifying the initial "mountpoint" for the root element with a
[part=root]element.E.g. to add a "clear" button at the end:
Example
Controlling where selected values go with
ul[part=values]You can also control where selected values are added by specifying a
ul[part=values]element.This can also be used to specify initial values if desired.
Example
Customizing how multiple values are displayed
By providing a template inside the
ul[part=values]element it is possible to specify how selected values are rendered.In short, there are three things to consider:
data-value- or the text content of alielement if not specified - is what's going to be what's added to the form data.data-label- or the text content of alielement if not specified - is what's going to be placed in unnamed slots.data-slot-attributescan be used to copy attributes from the selected element inside the popup to the new element inul[part=values]Example