Text field

One line of text with a label, help and error.

<mm-text-field name="owner" type="email" label="Owner email" required
  help="We send freshness alerts here."></mm-text-field>
<mm-text-field name="mrn" label="Asset MRN" mono value="mrn://postgresql/table/shop.public.orders"></mm-text-field>

Guidance

Text fields take one line of text: a label above, the field, then help or error text. Use mono for machine strings such as MRNs, asset IDs and connection strings, and never for prose. Passwords get a show and hide toggle, maxlength adds a character counter, and clearable adds a clear button once there is a value.

Form-associated: submits value under name with a native form or a SvelteKit form action, takes part in constraint validation (required, pattern, minlength, maxlength, and the email and URL types), resets with the form and is disabled by a disabled fieldset. Enter submits the owning form, as a native input does.

Properties

Property	Attribute	Type	Default	Description
type	type	'text' | 'email' | 'url' | 'password' | 'tel'	'text'	text (default), email, url, password or tel.
value	value	string	''	The current value. The value attribute is the default the form resets to.
placeholder	placeholder	string	''
pattern	pattern	string	''	A regular expression the whole value must match.
minlength	minlength	number | undefined
maxlength	maxlength	number | undefined		Maximum length; also shows a counter.
autocomplete	autocomplete	string | undefined
inputmode	inputmode	string | undefined
readonly	readonly	boolean	false
mono	mono	boolean	false	Sets the value in mono, for machine strings (IDs, MRNs, keys).
clearable	clearable	boolean	false	Shows a clear button when there is a value.
label	label	string	''	Field label. Rendered above the control unless hide-label, and always the accessible name.
help	help	string	''	Help text under the control.
error	error	string	''	Error text: a sentence saying what to fix. Shows the crimson border, an icon and sets aria-invalid.
hideLabel	hide-label	boolean	false	Hides the label visually; it stays the accessible name.
optional	optional	boolean	false	Marks the field as optional, in words.
name	name	string	''	Name submitted with the form.
disabled	disabled	boolean	false	Disables the control and excludes it from submission.
required	required	boolean	false	Requires a value before the form submits.
form		HTMLFormElement | null
validity		ValidityState
validationMessage		string
willValidate		boolean
isDisabled		boolean		True when disabled directly or by a disabled ancestor fieldset.

Methods

Method	Description
select()	Selects all text in the field.
formResetCallback()	Restore the initial value when the owning form resets.

Events

Event	Detail	Description
mm-input	CustomEvent<MmValueDetail>	On every edit.
mm-change	CustomEvent<MmValueDetail>	When the value is committed (blur after editing, or clearing).
input	InputEvent	Native, composed; on every edit.
change	Event	Native, re-dispatched on the host when the value is committed.

Slots

Slot	Description
prefix	Content before the input, such as an icon or a fixed scheme like mrn://.
suffix	Content after the input, such as a unit or a domain.

CSS parts

Part	Description
label	The label.
control	The bordered input box.
input	The native input.
help	The help line.
error	The error line.
counter	The character counter.

Examples

Every state of mm-text-field in Storybook, with keyboard and screen reader tests.