Svelte Material UI

Text Field

npm i -D @smui/textfield
Focused: false, Dirty: false, Invalid: false, Value: null
Standard
Value: 
Value: 
Value: 
Value: 
Filled
Value: 
Value: 
Value: 
Value: 
Outlined
Value: 
Value: 
Value: 
Value: 
Shaped Filled

Styled with CSS

Value: 
Value: 
Value: 
Value: 
Shaped Outlined

Styled with CSS

Value: 
Value: 
Value: 
Value: 
Required
Value: 
Value: 
Value: 
Disabled
Prefixed
Value: 
Value: 
Value: 
Suffixed
Value: 
Value: 
Value: 
Without label or helper text
Value: 
Value: 
Value: 
With persistent helper text
Helper Text
Value: 
Helper Text
Value: 
Helper Text
Value: 
With character count
0 / 18
Value: 
0 / 18
Value: 
0 / 18
Value: 
With helper text and character count
0 / 18
Value: 
0 / 18
Value: 
0 / 18
Value: 
Both icons
Value: 
Value: 
Value: 
Conditional icons
Value: 
Value: 
Value: 
Textarea
Textarea with character count
Full width
Full width textarea
Fixed Size Textarea

Turn off the browser's native resize feature.

Elements in the label
Different input types
Manual setup
Value: 
Value: 
Value: 
Value: 
Solo style

Using Paper and an Input outside a Textfield to create a "Solo" input

Value: