Text Input
Input field for text entry with various styling options
Class Reference Basic
With Content
Div(
Label(
Input(type='text', placeholder='Search', cls='grow'),
Icon.search(),
cls='input input-bordered flex items-center gap-2'
),
Label(
Icon.email(),
Input(type='text', placeholder='Email', cls='grow'),
cls='input input-bordered flex items-center gap-2'
),
Label(
Icon.user(),
Input(type='text', placeholder='Username', cls='grow'),
cls='input input-bordered flex items-center gap-2'
),
cls='flex flex-col gap-4 w-full items-center'
)
Auto-import documentation coming soon...
Colors
Sizes
States
Class Reference
Class | Type | Description |
---|---|---|
input | Component | Base class |
input-bordered | Variant | Adds border styling |
input-ghost | Variant | Ghost style without background |
input-primary | Color | Primary color variant |
input-secondary | Color | Secondary color variant |
input-accent | Color | Accent color variant |
input-success | Color | Success color variant |
input-warning | Color | Warning color variant |
input-info | Color | Info color variant |
input-error | Color | Error color variant |
input-xs | Size | Extra small size |
input-sm | Size | Small size |
input-md | Size | Medium size (default) |
input-lg | Size | Large size |
input-disabled | State | Disabled state styling |
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
LLMs Context: Full Markdown | This Component