---
title: Input
description: Text input fields for user data entry.
icon: i-cursor
---

import { ComponentPreview } from "/snippets/component-preview.mdx";

Inputs collect text, email, passwords, and other single-line data from users.

## Basic Usage

<ComponentPreview json={{"view":{"type":"Input","inputType":"text","placeholder":"Enter your email...","disabled":false,"required":false}}}>
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Input

Input(placeholder="Enter your email...")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Input",
    "inputType": "text",
    "placeholder": "Enter your email...",
    "disabled": false,
    "required": false
  }
}
```
</CodeGroup>
</ComponentPreview>

## Input Types

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

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"type":"Input","inputType":"email","placeholder":"Email","disabled":false,"required":false},{"type":"Input","inputType":"password","placeholder":"Password","disabled":false,"required":false},{"type":"Input","inputType":"number","placeholder":"Age","disabled":false,"required":false},{"type":"Input","inputType":"tel","placeholder":"Phone","disabled":false,"required":false}]}}}>
<CodeGroup>
```python Python icon="python"
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"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {
        "type": "Input",
        "inputType": "email",
        "placeholder": "Email",
        "disabled": false,
        "required": false
      },
      {
        "type": "Input",
        "inputType": "password",
        "placeholder": "Password",
        "disabled": false,
        "required": false
      },
      {
        "type": "Input",
        "inputType": "number",
        "placeholder": "Age",
        "disabled": false,
        "required": false
      },
      {
        "type": "Input",
        "inputType": "tel",
        "placeholder": "Phone",
        "disabled": false,
        "required": false
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## With Labels

Pair inputs with labels for accessible forms:

<ComponentPreview json={{"view":{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Email address"},{"type":"Input","inputType":"email","placeholder":"you@example.com","disabled":false,"required":true}]}}}>
<CodeGroup>
```python Python icon="python"
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"
{
  "view": {
    "cssClass": "gap-2",
    "type": "Column",
    "children": [
      {
        "type": "Label",
        "text": "Email address"
      },
      {
        "type": "Input",
        "inputType": "email",
        "placeholder": "you@example.com",
        "disabled": false,
        "required": true
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Date & Time Inputs

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

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Row","children":[{"cssClass":"gap-2 flex-1","type":"Column","children":[{"type":"Label","text":"Date"},{"type":"Input","inputType":"date","name":"date","disabled":false,"required":false}]},{"cssClass":"gap-2 flex-1","type":"Column","children":[{"type":"Label","text":"Time"},{"type":"Input","inputType":"time","name":"time","disabled":false,"required":false}]},{"cssClass":"gap-2 flex-1","type":"Column","children":[{"type":"Label","text":"Date & Time"},{"type":"Input","inputType":"datetime-local","name":"datetime","disabled":false,"required":false}]}]}}}>
<CodeGroup>
```python Python icon="python"
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"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Row",
    "children": [
      {
        "cssClass": "gap-2 flex-1",
        "type": "Column",
        "children": [
          {
            "type": "Label",
            "text": "Date"
          },
          {
            "type": "Input",
            "inputType": "date",
            "name": "date",
            "disabled": false,
            "required": false
          }
        ]
      },
      {
        "cssClass": "gap-2 flex-1",
        "type": "Column",
        "children": [
          {
            "type": "Label",
            "text": "Time"
          },
          {
            "type": "Input",
            "inputType": "time",
            "name": "time",
            "disabled": false,
            "required": false
          }
        ]
      },
      {
        "cssClass": "gap-2 flex-1",
        "type": "Column",
        "children": [
          {
            "type": "Label",
            "text": "Date & Time"
          },
          {
            "type": "Input",
            "inputType": "datetime-local",
            "name": "datetime",
            "disabled": false,
            "required": false
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Disabled State

<ComponentPreview json={{"view":{"type":"Input","inputType":"text","placeholder":"Disabled input","disabled":true,"required":false}}}>
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Input

Input(placeholder="Disabled input", disabled=True)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Input",
    "inputType": "text",
    "placeholder": "Disabled input",
    "disabled": true,
    "required": false
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Input Parameters">

<ParamField body="input_type" type="str" default="text">
  Input type: `"text"`, `"email"`, `"password"`, `"number"`, `"tel"`, `"url"`, `"search"`, `"date"`, `"time"`, `"datetime-local"`, `"file"`.
</ParamField>

<ParamField body="placeholder" type="str | None" default="None">
  Placeholder text shown when the input is empty.
</ParamField>

<ParamField body="value" type="str | None" default="None">
  Initial value.
</ParamField>

<ParamField body="name" type="str | None" default="None">
  Form field name for submission.
</ParamField>

<ParamField body="disabled" type="bool" default="False">
  Whether the input is non-interactive.
</ParamField>

<ParamField body="required" type="bool" default="False">
  Whether the input is required for form submission.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes appended to the component's built-in styles.
</ParamField>
</Card>

## Protocol Reference

```json 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](/protocol/input).
