Text Input

Input field for text entry with various styling options

Basic

Basic Input

Default text input

Preview Code Auto

Input(type='text', placeholder='Type here', cls='input')

Ghost Style

Input without background

Preview Code Auto

Input(type='text', placeholder='Type here', cls='input input-ghost')

Fieldset with Labels

Preview Code Auto

What is your name?

Optional

Fieldset(
    Legend("What is your name?", cls='fieldset-legend'),
    Input(type='text', placeholder='Type here', cls='input'),
    P("Optional", cls='fieldset-label'),
    cls='fieldset'
)

With Content

With Icons

Preview Code Auto

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'
)

Colors

Color Variants

All available color variations

Preview Code Auto

Input(
    type='text',
    placeholder='Type here',
    cls=f'input input-{color}'
)

Sizes

Size Variants

Different input sizes

Preview Code Auto

Input(
    type='text',
    placeholder='Type here',
    cls=f'input input-{size}'
)

States

Disabled State

Preview Code Auto

Input(
    type='text',
    placeholder="You can't touch this",
    disabled=True,
    cls='input input-bordered w-full max-w-xs'
)

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

Resources: DaisyUI | TailwindCSS | FastHTML Repo