Text Fields

Text fields components are used for collecting user provided information.

API

Usage

Examples

Dense

You can reduces the text field height with dense prop.

Disabled and Readonly

Text fields can be disabled or readonly.

Icons

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

Clearable

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

Counter

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.

Label

Text field label can be defined in the default slot.

Password

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

Validation

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