Text Fields

Text fields let users enter and edit text

Textfield

Try out the textfield API methods

Filled Input

Select variant

filled

outlined

Disabled

Textfield Variants

Filled Input

Outlined Input

Textfields with Leading Icons

Textfields with Trailing Icons

Clear Input

Textfield with trailing clear icon

Clear Input

Textfield with trailing clear icon

Textfields with prefix text

AmountUSD

Textfields with suffix text

Weightlbs

Textfields with Supporting Text

Username

Between 3-20 characters

Password

At least 8 characters

Invalid email address

Textfields with Combined Features

Type to search, click X to clear

min 3 characters

Multiline Textfield

Multiline Input

mtrl is a lightweight, composable TypeScript/JavaScript component library inspired by Material Design principles. Built with zero dependencies, MTRL provides a robust foundation for creating modern web interfaces with an emphasis on performance, type safety, and accessibility.

Links

npm GitHub X