Text Fields

Text fields components are used for collecting user provided information.





You can reduces the text field height with dense prop.

Disabled and Readonly

Text fields can be disabled or readonly.


You can add icons to the text field with prepend, append, prepend-outer and append-outer slots.


When clearable, you can customize the clear icon with clear-icon.


Use a counter prop to inform a user of the character limit. The counter does not perform any validation by itself. You will need to pair it with either the internal validation system, or a 3rd party library.


Text field label can be defined in the default slot.


A password input can be used with an appended icon and callback to control the visibility.


Svelte Materialify provides inbuild simple validation through the rules prop. The prop accepts a array of callbacks with the input value as an arguement. By default this runs a check whenever the user types something, to delay the validation till the input loses focus use validateOnBlur.

const rules = [
  (value) => {
    if (condition) return 'Error Message';
    return false;

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2021-09-02