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.