Basic Input
A simple text input with default settings.
Labels
Use the label attribute to add a label above the input.
Help Text
Use help-text to provide additional context below the input.
Placeholders
Placeholder text shows when the input is empty.
Clearable
The clearable attribute adds a clear button when the input has a value.
Password Toggle
Add password-toggle to password inputs to let users reveal their password.
Filled Variant
The filled attribute gives the input a filled appearance instead of an
outline.
Disabled
Disabled inputs cannot be interacted with.
Sizes
Three sizes are available: small, medium (default), and
large.
Pill
The pill modifier gives inputs fully rounded corners.
Input Types
Supports all standard HTML input types.
Prefix & Suffix Icons
Use slot="prefix" and slot="suffix" to add icons inside the
input.
Event Log
Interact with the input below to see events fire in real time.