Material Design 3 text field web components: lit-material-text-field (single-line) and lit-material-textarea (multi-line) — filled + outlined, validation states.
Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-input-group>
Joins fields and buttons into one control: a protocol select in front of
a URL, a field with a "Generate" button after it, a value and its unit.
Inner corners are squared and the pieces sit edge to edge.
Slots
Slot
Description
default
The fields and buttons, in order.
<lit-material-number-field>
A number with − and + buttons beside it: replicas, cores, gigabytes.
Typing works too; ArrowUp/ArrowDown step, PageUp/PageDown step by ten,
Home/End jump to min/max when set.
Properties
Property
Attribute
Type
Default
Description
value
value
number | null
null
The number, or null when empty.
min
min
number | undefined
none
max
max
number | undefined
none
step
step
number
1
Amount per step; typed values aren't snapped to it.
label
label
string
""
unit
unit
string
""
Shown after the number inside the field, e.g. "GiB".
variant
variant
TextFieldVariant
"outlined"
supportingText
supporting-text
string
""
errorText
error-text
string
""
An error of your own; the field's own range and number checks come first.
name
name
string
""
required
required
boolean
false
disabled
disabled
boolean
false
readonly
readonly
boolean
false
validationMessage
property only
string
""
The field's own problem with the text, "" when none.
Events
Event
Description
change
After a step, or when a typed value is committed.
input
While typing, once the text is a number (or empty).
CSS parts
Part
Description
field
The text field.
decrement
The − button.
increment
The + button.
CSS custom properties
Property
Description
--lit-material-number-field-width
The field's smallest width (default 8ch).
<lit-material-text-field>
Material Design 3 text field.
Properties
Property
Attribute
Type
Default
Description
variant
variant
TextFieldVariant
"filled"
type
type
string
"text"
value
value
string
""
label
label
string
""
placeholder
placeholder
string
""
supportingText
supporting-text
string
""
errorText
error-text
string
""
error
error
boolean
false
disabled
disabled
boolean
false
required
required
boolean
false
readonly
readonly
boolean
false
prefix
prefix
string
""
suffix
suffix
string
""
min
min
number | undefined
none
max
max
number | undefined
none
minlength
minlength
number | undefined
none
maxlength
maxlength
number | undefined
none
step
step
string
""
pattern
pattern
string
""
autocomplete
autocomplete
string
""
inputmode
inputmode
string
""
name
name
string
""
form
form
string | undefined
none
Events
Event
Description
change
Bubbles on committed edits (blur/Enter).
input
Bubbles when the value changes (like a native input).
Slots
Slot
Description
leading-icon
An optional icon before the input.
trailing-icon
An optional icon after the input.
CSS parts
Part
Description
container
The outer field container (background/border).
input
The native <input> element.
label
The floating label element.
supporting
The supporting-text / character-counter row.
CSS custom properties
Property
Description
--lit-material-text-field-min-width
Smallest width (default 210px); 0 lets a grid or flex cell narrow it.
--lit-material-text-field-shape
Corner radius (default --md-sys-shape-corner-extra-small; filled rounds the top only).
Behind the outlined variant's floating label; match the surface the field sits on (default --md-sys-color-surface; dialogs set it for you).
<lit-material-textarea>
Material Design 3 multi-line text field — lit-material-text-field's
sibling for body-length text (a comment, a description, an address).
Shares its floating-label/filled/outlined/error-state/character-counter
design, minus the parts that don't make sense for multiple rows: no
leading/trailing icon slots, no prefix/suffix, and a resting label that
sits near the top (roughly where the first typed line would go) instead
of vertically centering the way a single-line input's does — there's no
sensible "middle" to center it in once the box is several rows tall.
Properties
Property
Attribute
Type
Default
Description
variant
variant
TextareaVariant
"filled"
value
value
string
""
label
label
string
""
placeholder
placeholder
string
""
supportingText
supporting-text
string
""
errorText
error-text
string
""
error
error
boolean
false
disabled
disabled
boolean
false
required
required
boolean
false
readonly
readonly
boolean
false
minlength
minlength
number | undefined
none
maxlength
maxlength
number | undefined
none
rows
rows
number
4
resize
resize
TextareaResize
"vertical"
autocomplete
autocomplete
string
""
name
name
string
""
form
form
string | undefined
none
Events
Event
Description
change
Bubbles on committed edits (blur).
input
Bubbles when the value changes (like a native textarea).
CSS parts
Part
Description
container
The outer field container (background/border).
textarea
The native <textarea> element.
label
The floating label element.
supporting
The supporting-text / character-counter row.
CSS custom properties
Property
Description
--lit-material-text-field-min-width
Smallest width (default 210px); 0 lets a grid or flex cell narrow it.
--lit-material-text-field-notch-color
Behind the outlined variant's floating label; match the surface the field sits on (default --md-sys-color-surface; dialogs set it for you).