> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Input
> Text input fields for user data entry.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
Inputs collect text, email, passwords, and other single-line data from users.
## Basic Usage
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Input
Input(placeholder="Enter your email...")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"name": "input_6",
"type": "Input",
"inputType": "text",
"placeholder": "Enter your email...",
"disabled": false,
"readOnly": false,
"required": false
}
}
```
## Input Types
Different input types provide appropriate keyboards and validation on mobile devices:
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Input,
Column,
)
with Column(gap=4):
Input(input_type="email", placeholder="Email")
Input(input_type="password", placeholder="Password")
Input(input_type="number", placeholder="Age")
Input(input_type="tel", placeholder="Phone")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"name": "input_7",
"type": "Input",
"inputType": "email",
"placeholder": "Email",
"disabled": false,
"readOnly": false,
"required": false
},
{
"name": "input_8",
"type": "Input",
"inputType": "password",
"placeholder": "Password",
"disabled": false,
"readOnly": false,
"required": false
},
{
"name": "input_9",
"type": "Input",
"inputType": "number",
"placeholder": "Age",
"disabled": false,
"readOnly": false,
"required": false
},
{
"name": "input_10",
"type": "Input",
"inputType": "tel",
"placeholder": "Phone",
"disabled": false,
"readOnly": false,
"required": false
}
]
}
}
```
## With Labels
Pair inputs with labels for accessible forms:
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Column,
Input,
Label,
)
with Column(gap=2):
Label("Email address")
Input(input_type="email", placeholder="you@example.com", required=True)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-2",
"type": "Column",
"children": [
{"type": "Label", "text": "Email address", "optional": false},
{
"name": "input_11",
"type": "Input",
"inputType": "email",
"placeholder": "you@example.com",
"disabled": false,
"readOnly": false,
"required": true
}
]
}
}
```
## Date & Time Inputs
Native date and time pickers use the browser's built-in UI:
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Column,
Input,
Label,
Row,
)
with Row(gap=4):
with Column(gap=2, css_class="flex-1"):
Label("Date")
Input(input_type="date", name="date")
with Column(gap=2, css_class="flex-1"):
Label("Time")
Input(input_type="time", name="time")
with Column(gap=2, css_class="flex-1"):
Label("Date & Time")
Input(input_type="datetime-local", name="datetime")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4",
"type": "Row",
"children": [
{
"cssClass": "gap-2 flex-1",
"type": "Column",
"children": [
{"type": "Label", "text": "Date", "optional": false},
{
"name": "date",
"type": "Input",
"inputType": "date",
"disabled": false,
"readOnly": false,
"required": false
}
]
},
{
"cssClass": "gap-2 flex-1",
"type": "Column",
"children": [
{"type": "Label", "text": "Time", "optional": false},
{
"name": "time",
"type": "Input",
"inputType": "time",
"disabled": false,
"readOnly": false,
"required": false
}
]
},
{
"cssClass": "gap-2 flex-1",
"type": "Column",
"children": [
{"type": "Label", "text": "Date & Time", "optional": false},
{
"name": "datetime",
"type": "Input",
"inputType": "datetime-local",
"disabled": false,
"readOnly": false,
"required": false
}
]
}
]
}
}
```
## Disabled State
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Input
Input(placeholder="Disabled input", disabled=True)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"name": "input_12",
"type": "Input",
"inputType": "text",
"placeholder": "Disabled input",
"disabled": true,
"readOnly": false,
"required": false
}
}
```
## 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Input
Input(value="api_key_91x8z3...", read_only=True)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"name": "input_13",
"value": "api_key_91x8z3...",
"type": "Input",
"inputType": "text",
"disabled": false,
"readOnly": true,
"required": false
},
"state": {"input_13": "api_key_91x8z3..."}
}
```
## 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:
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Column, Input, Text
with Column(gap=4):
inp = Input(placeholder="What is your name, traveler?")
Text(f"Hello, {inp.rx.default('stranger')}!")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"name": "input_14",
"type": "Input",
"inputType": "text",
"placeholder": "What is your name, traveler?",
"disabled": false,
"readOnly": false,
"required": false
},
{"content": "Hello, {{ input_14 | default:stranger }}!", "type": "Text"}
]
}
}
```
Type a name and the greeting updates with each keystroke.
## API Reference
Input type: `"text"`, `"email"`, `"password"`, `"number"`, `"tel"`, `"url"`, `"search"`, `"date"`, `"time"`, `"datetime-local"`, `"file"`.
Placeholder text shown when the input is empty.
Initial value.
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.
Whether the input is non-interactive.
Whether the input is read-only. The value is visible and selectable but cannot be edited.
Whether the input is required for form submission.
Additional Tailwind CSS classes appended to the component's built-in styles.
## Protocol Reference
```json Input theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "Input",
"id?": "string",
"onMount?": "any",
"name?": "string",
"value?": "string",
"inputType?": "text | email | password | number | tel | url | search | date | time | datetime-local | file",
"placeholder?": "string",
"disabled?": false,
"readOnly?": 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](/protocol/input).