Input

Displays a form input field or a component that looks like an input field.

First Name

Last Name

Password

Phone Number

Installation

CLI

Install the component using the StarUI CLI:

star add input

Examples

Reactive Input with Validation

Real-time input validation using signals

Username *

Username must be at least 3 characters, letters/numbers/underscores only

✓ Username is available

Please enter a valid email address

✓ Valid email format

from starhtml import *
from starui import *

Div(
    (username := Signal("username", "")),
    (username_valid := Signal("username_valid", False)),
    (user_email := Signal("user_email", "")),
    (user_email_valid := Signal("user_email_valid", False)),
    Div(
        UILabel(
            "Username",
            Span(" *", cls="text-destructive"),
            fr="username-reactive"
        ),
        Input(
            id="username-reactive",
            placeholder="Enter username",
            signal=username,
            data_on_input=username_valid.set(username.match(regex(r"^[a-zA-Z0-9_]{3,}$"))),
            cls="w-80"
        ),
        Div(
            P(
                "Username must be at least 3 characters, letters/numbers/underscores only",
                data_show=~username_valid & (username.length > 0),
                cls="text-xs text-destructive break-words"
            ),
            P(
                "✓ Username is available",
                data_show=username_valid & (username.length > 0),
                cls="text-xs text-green-600"
            ),
            cls="mt-1 min-h-[1rem] w-80"
        ),
        cls="space-y-2"
    ),
    Div(
        UILabel("Email", fr="email-reactive"),
        Input(
            type="email",
            id="email-reactive",
            placeholder="[email protected]",
            signal=user_email,
            data_on_input=user_email_valid.set(user_email.match(regex(r"^[^\s@]+@[^\s@]+\.[^\s@]+$"))),
            cls="w-80"
        ),
        Div(
            P(
                "Please enter a valid email address",
                data_show=~user_email_valid & (user_email.length > 0),
                cls="text-xs text-destructive break-words"
            ),
            P(
                "✓ Valid email format",
                data_show=user_email_valid & (user_email.length > 0),
                cls="text-xs text-green-600"
            ),
            cls="mt-1 min-h-[1rem] w-80"
        ),
        cls="space-y-2"
    ),
    cls="grid gap-4 max-w-md"
)

Input with Buttons

Combine inputs with action buttons

Subscribe to Newsletter

Search Products

Input with Icons

Inputs with custom icons that adapt to dark mode

Quantity

Email Address

Phone Number

Website

Input States

Disabled, read-only, and required inputs

Disabled Input

Read-only Input

Required Field *

This field is required

File Upload

File input fields with accept filters

Profile Picture

PNG, JPG up to 2MB

Document Upload

PDF, DOC, DOCX files (multiple allowed)

from starhtml import *
from starui import *

Div(
    (file_error := Signal("file_error", "")),
    (file_name := Signal("file_name", "")),
    (doc_count := Signal("doc_count", 0)),
    (avatar_input := Signal("avatar_input", _ref_only=True)),
    (docs_input := Signal("docs_input", _ref_only=True)),
    Div(
        UILabel("Profile Picture"),
        Div(
            Input(
                type="file",
                accept=".png,.jpg,.jpeg",
                data_ref=avatar_input,
                data_on_change=[
                    file_name.set("evt.target.files[0]?.name || ''"),
                    file_error.set(
                        "(evt.target.files[0]?.size || 0) > 2097152 ? 'File size must be under 2MB' : ''"
                    )
                ],
                cls="hidden"
            ),
            Button(
                Icon("lucide:upload", cls="h-4 w-4 mr-2"),
                "Choose File",
                variant="outline",
                data_on_click=avatar_input.click(),
                type="button"
            ),
            Span(
                data_text=file_name | "No file chosen",
                cls="ml-3 text-sm text-muted-foreground"
            ),
            cls="flex items-center"
        ),
        P("PNG, JPG up to 2MB", data_show=~file_error & ~file_name, cls="text-xs text-muted-foreground mt-1.5"),
        P(data_text=file_error, data_show=file_error, cls="text-xs text-destructive mt-1.5"),
        P(
            "✓ File ready to upload",
            data_show=file_name & ~file_error,
            cls="text-xs text-green-600 mt-1.5"
        ),
        cls="space-y-2"
    ),
    Div(
        UILabel("Document Upload"),
        Div(
            Input(
                type="file",
                accept=".pdf,.doc,.docx",
                multiple=True,
                data_ref=docs_input,
                data_on_change=doc_count.set("evt.target.files.length"),
                cls="hidden"
            ),
            Button(
                Icon("lucide:paperclip", cls="h-4 w-4 mr-2"),
                "Choose Files",
                variant="outline",
                data_on_click=docs_input.click(),
                type="button"
            ),
            Span(
                data_text=(doc_count > 0).if_(doc_count + " file(s) selected", "No files chosen"),
                cls="ml-3 text-sm text-muted-foreground"
            ),
            cls="flex items-center"
        ),
        P("PDF, DOC, DOCX files (multiple allowed)", cls="text-xs text-muted-foreground mt-1.5"),
        cls="space-y-2"
    ),
    cls="grid gap-4 max-w-md"
)

API Reference

Props

Prop	Type	Default	Description
`type`	`InputType`	`text`	Input type (text, email, password, number, etc.)
`placeholder`	`str \| None`	`None`	Placeholder text shown when empty
`signal`	`str \| None`	`None`	Datastar signal for reactive binding
`validation`	`str \| None`	`None`	JS expression to set <signal>_valid on input
`value`	`str \| None`	`None`	Initial value for non-reactive usage
`disabled`	`bool`	`False`	Disable the input and style accordingly
`readonly`	`bool`	`False`	Make input read-only without disabling
`required`	`bool`	`False`	Mark the input as required
`cls`	`str`	`''`	Additional CSS classes for layout/styling