Skip to main content
Inputs collect text, email, passwords, and other single-line data from users.

​
Basic Usage

​
Input Types

Different input types provide appropriate keyboards and validation on mobile devices:

​
With Labels

Pair inputs with labels for accessible forms:

​
Date & Time Inputs

Native date and time pickers use the browser’s built-in UI:

​
Disabled State

​
Read-Only

A read-only input displays its value and allows users to select and copy the text, but prevents editing. Unlike disabled, the input retains its normal visual appearance — it doesn’t grey out or signal that interaction is blocked.

​
Reading the Value

Use .rx to get a reactive reference to the input’s current text. As the user types, any component that references .rx updates automatically: Type a name and the greeting updates with each keystroke.

​
API Reference

Input Parameters

​
str
default:"text"
Input type: "text", "email", "password", "number", "tel", "url", "search", "date", "time", "datetime-local", "file".
​
str | None
default:"None"
Placeholder text shown when the input is empty.
​
str | None
default:"None"
Initial value.
​
str | None
default:"None"
State key for the input’s current value. Auto-generated if not provided. Set this to bind the input to a known key, or use .rx to reference the auto-generated key without knowing it.
​
bool
default:"False"
Whether the input is non-interactive.
​
bool
default:"False"
Whether the input is read-only. The value is visible and selectable but cannot be edited.
​
bool
default:"False"
Whether the input is required for form submission.
​
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Input
For the complete protocol schema, see Input.