TextField

Text fields let users enter and edit text. They come in three variants: outlined (default), filled, and standard.

Variants

<me-text-field variant="outlined" label="Outlined"></me-text-field> <me-text-field variant="filled" label="Filled"></me-text-field> <me-text-field variant="standard" label="Standard"></me-text-field>

With Placeholder

Types

Helper Text & Error

<me-text-field label="Email" helper-text="Enter your email"></me-text-field> <me-text-field label="Email" error helper-text="Invalid email address"></me-text-field>

Multiline

<me-text-field label="Message" multiline rows="4"></me-text-field>

Sizes

Disabled & Readonly

Adornments

<me-text-field label="Amount" start-adornment="$"></me-text-field> <me-text-field label="Weight" end-adornment="kg"></me-text-field>

Color

API

Attribute	Type	Default	Description
`variant`	outlined \| filled \| standard	outlined	The visual style variant.
`label`	string	—	The floating label text.
`value`	string	""	The input value.
`type`	string	text	HTML input type (text, email, password, number, etc.)
`placeholder`	string	—	Placeholder text.
`helper-text`	string	—	Helper or error text below the field.
`error`	boolean	false	Puts the field in error state.
`disabled`	boolean	false	Disables the field.
`readonly`	boolean	false	Makes the field read-only.
`required`	boolean	false	Required for form validation.
`multiline`	boolean	false	Renders a textarea instead of input.
`rows`	number	4	Number of rows for multiline.
`size`	small \| medium	medium	The field size.
`color`	primary \| secondary	primary	The active/focus color.
`start-adornment`	string	—	Text/icon shown before the input.
`end-adornment`	string	—	Text/icon shown after the input.
`name`	string	—	Form field name.
`autocomplete`	string	—	Autocomplete attribute passed to the input.

Events

Event	Description
`input`	Fired on every keystroke.
`change`	Fired when the value commits (blur or Enter).