---
title: Input
description: Displays a form input field or a component that looks like an input field.
icon: type
author:
  name: shadcn
  url: https://github.com/shadcn
mode: wide
---

<PoweredBy packages={[{ name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/input' }]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/input
```

<ComponentPreview name="input-demo" className="[&_input]:max-w-xs" description="A form input component." />

## When to use

Use this decision tree to determine when to use the Input component:

```mermaid
graph TD;
    A[❓ Need text input field?] --> B{What type of input?};
    B --> C[✅ Single-line text];
    B --> D[✅ Numbers/numeric data];
    B --> E[✅ Passwords/sensitive data];
    B --> F[⚠️ Multi-line text];

    C --> G[❓ Input behavior?];
    D --> H[✅ Use number input variant];
    E --> I[✅ Use password input variant];
    F --> J[⚠️ Use Textarea instead];

    G --> K[✅ Free text entry];
    G --> L[⚠️ Select from options];

    K --> M[❓ Additional features needed?];
    L --> N[⚠️ Use Select/Combobox instead];
    H --> M;
    I --> M;

    M --> O[✅ Date selection];
    M --> P[✅ File upload];
    M --> Q[✅ Action button integration];
    M --> R[ℹ️ Basic input only];

    O --> S[✅ Use Input with DatePicker];
    P --> T[✅ Use file input variant];
    Q --> U[✅ Use Input with Button];
    R --> V[ℹ️ Standard Input component];

    S --> W[❓ Form integration?];
    T --> W;
    U --> W;
    V --> W;

    W --> X[✅ Use with Form components];
    W --> Y[ℹ️ Standalone input];

    X --> Z[❓ Accessibility needs?];
    Y --> Z;

    Z --> AA[✅ Add proper labels and descriptions];
    Z --> BB[ℹ️ Basic input implementation];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class C,D,E,H,I,K,S,T,U,X,AA recommended;
    class F,J,L,N discouraged;
    class A,B,G,M,W,Z decision;
    class O,P,Q,R,V,Y,BB neutral;
```

## Usage

```tsx
import { Input } from '@/components/ui/input';
```

```tsx
<Input />
```

## Appearance contracts

Use finite props for appearance; reserve `className` for placement and width.

| Prop         | Values                                                              | Purpose                                                        |
| ------------ | ------------------------------------------------------------------- | -------------------------------------------------------------- |
| `size`       | `sm`, `md`, `lg`                                                    | Consistent field height and padding                            |
| `tone`       | `standard`, `success`                                               | Verified-value feedback; `aria-invalid` still takes precedence |
| `textStyle`  | `standard`, `monospace`                                             | Fixed-width identifiers, durations, and large integers         |
| `appearance` | `standard`, `surface`, `flat`, `surface-flat`, `embedded`, `inline` | Field chrome owned by the input                                |

`surface` uses the page background; `flat` removes the field shadow. `surface-flat` combines these for sidebar search. Use `embedded` only inside a composite that already provides its border and focus indicator, such as `InputGroup`. Use `inline` for editable text that inherits its surrounding typography and owns an underline instead of a boxed field.

Supply `aria-invalid` or a `Field` error state for invalid values rather than replacing border classes. Put icons and interactive controls in `InputStart` and `InputEnd`; their measured widths reserve text space without manual padding overrides.

### Color swatches

Use `ColorInput` for a native color picker rather than restyling the text Input. Its `presentation="swatch"` mode sits over a painted proxy and reveals the native control with a visible ring on keyboard focus. Always provide a label; the forwarded ref points directly to the native color input.

```tsx
import { ColorInput } from '@/components/ui/input';

<ColorInput aria-label="Accent color" defaultValue="#c93617" />;
```

## Examples

### Default

<ComponentPreview name="input-demo" className="[&_input]:max-w-xs" description="A form input component." />

### Number

<ComponentPreview name="input-number-demo" className="[&_input]:max-w-xs" description="A number input component." />

### Password

<ComponentPreview name="input-password-demo" className="[&_input]:max-w-xs" description="A password input component." />

### File

<ComponentPreview name="input-file-demo" className="[&_input]:max-w-xs" description="A file input component." />

### Disabled

<ComponentPreview name="input-disabled-demo" className="[&_input]:max-w-xs" description="A disabled input component." />

### With Label

<ComponentPreview
  name="input-with-label-demo"
  className="[&_input]:max-w-xs"
  description="An input component with a label."
/>

### With Button

<ComponentPreview
  name="input-with-button-demo"
  className="[&_input]:max-w-xs"
  description="An input component with a button."
/>

### With Slots

<ComponentPreview
  name="input-with-slots-demo"
  className="[&_input]:max-w-xs"
  description="An input component with InputStart and InputEnd slots for icons and controls."
/>

### With Date Picker

<ComponentPreview
  name="input-date-picker-demo"
  className="[&_input]:max-w-xs"
  description="An input component with a date picker."
/>

### Form

<ComponentPreview
  name="input-form-demo"
  className="[&_input]:max-w-xs"
  description="An input component used in a form."
/>

## Credits

- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/input) for the input component and style.