Inputs and Fields

InputTypePartMap

Maps an <input>'s type to a string value that will be used as a part value for <input>s of that type.

Optional second parameter of the assignInputTypeToPart() function.

The InputTypePartMap object is a configuration object and each of its properties act like keys. It does not expose any methods.

The configuration does include an additional property which maps <input>s that have a type of text and also an inputmode attribute with a value of numeric. Those <input>s can be mapped separately in case "numeric" <input>s should be styled differently than text <input>s.

Properties
Name Description Value Type Default Value
button

Maps to <input>s with the type attribute set to button.
string
"button"
checkbox

Maps to <input>s with the type attribute set to checkbox.
string
"checkbox"
color

Maps to <input>s with the type attribute set to color.
string
"color"
date

Maps to <input>s with the type attribute set to date.
string
"date"
"datetime-local"

Maps to <input>s with the type attribute set to datetime-local.
string
"datetime-local"
email

Maps to <input>s with the type attribute set to email.
string
"email"
file

Maps to <input>s with the type attribute set to file.
string
"file"
hidden

Maps to <input>s with the type attribute set to hidden.
string
"hidden"
image

Maps to <input>s with the type attribute set to image.
string
"image"
month

Maps to <input>s with the type attribute set to month.
string
"month"
number

Maps to <input>s with the type attribute set to number.
string
"number"
password

Maps to <input>s with the type attribute set to password.
string
"password"
radio

Maps to <input>s with the type attribute set to radio.
string
"radio"
range

Maps to <input>s with the type attribute set to range.
string
"range"
reset

Maps to <input>s with the type attribute set to reset.
string
"reset"
search

Maps to <input>s with the type attribute set to search.
string
"search"
submit

Maps to <input>s with the type attribute set to submit.
string
"submit"
tel

Maps to <input>s with the type attribute set to tel.
string
"tel"
text

Maps to <input>s with the type attribute set to text.
string
"text"
time

Maps to <input>s with the type attribute set to time.
string
"time"
url

Maps to <input>s with the type attribute set to url.
string
"url"
week

Maps to <input>s with the type attribute set to week.
string
"week"
"text-numeric"

Maps to <input>s with the type attribute set to text that also include an inputmode attribute set to numeric.
string
"number"

Methods

This object does not expose any methods.

assignInputTypeToPart

Return Type
undefined

Takes a shadow root and an optional configuration object as parameters and then queries for all of the child <input> elements.

For each element returned by the query, the function assigns the element's type attribute value to its part attribute.

Parameters
Name Description Value Type Default Value
shadowRoot

The shadow root of the target custom element.
ShadowRoot 
undefined
config?

Optional

An InputTypePartMap object that maps input types to part assignment.
InputTypePartMap
undefined

assignFormFieldPartAttributes

Return Type
undefined

*Note: The <form-field> element is a custom element. This function only processes that specific custom element.

Takes a shadow root and an optional configuration object as parameters and then queries for all of the child <form-field> elements.

For each element returned by the query, the function assigns part values to the field element and its children, prefixed by field- and corresponding to the element's role in the field.

Parameters
Name Description Value Type Default Value
shadowRoot

The shadow root of the target custom element.
ShadowRoot
undefined