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

​
API Reference

Input Parameters

​
input_type
str
default:"text"
Input type: "text", "email", "password", "number", "tel", "url", "search", "date", "time", "datetime-local", "file".
​
placeholder
str | None
default:"None"
Placeholder text shown when the input is empty.
​
value
str | None
default:"None"
Initial value.
​
name
str | None
default:"None"
Form field name for submission.
​
disabled
bool
default:"False"
Whether the input is non-interactive.
​
required
bool
default:"False"
Whether the input is required for form submission.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Input
{
  "type": "Input",
  "inputType?": "text | email | password | number | tel | url | search | date | time | datetime-local | file",
  "placeholder?": "string",
  "value?": "string",
  "name?": "string",
  "disabled?": false,
  "required?": false,
  "minLength?": "number",
  "maxLength?": "number",
  "min?": "number",
  "max?": "number",
  "step?": "number",
  "pattern?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Input.