

<InteractiveDemo
  name="input"
  engine="source"
  fallback="`<Input placeholder=&#x22;Enter text...&#x22; />`"
  controls="[
  	{ name: &#x22;placeholder&#x22;, type: &#x22;string&#x22;, defaultValue: &#x22;Enter text...&#x22; },
  	{ name: &#x22;size&#x22;, type: &#x22;enum&#x22;, options: [&#x22;sm&#x22;, &#x22;md&#x22;, &#x22;lg&#x22;], defaultValue: &#x22;md&#x22; },
  	{ name: &#x22;disabled&#x22;, type: &#x22;boolean&#x22;, defaultValue: false },
  	{ name: &#x22;readOnly&#x22;, type: &#x22;boolean&#x22;, defaultValue: false },
  ]"
/>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @dotui/input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @dotui/input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @dotui/input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @dotui/input
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

Use `Input` to allow users to enter text. Combine with `InputGroup` and `InputGroupAddon` to add icons, buttons, or labels alongside the input.

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

```tsx
<Input placeholder="Enter text..." />
```

## Sizes [#sizes]

Use the `size` prop to control the input height. Available sizes are `sm`, `md` (default), and `lg`.

```tsx
<Input size="sm" />
<Input size="md" />
<Input size="lg" />
```

## Examples [#examples]

<Examples>
  <Example name="input/demos/default" title="Default" />

  <Example name="input/demos/sizes" title="All sizes" />

  <Example name="input/demos/disabled" title="Disabled" />

  <Example name="input/demos/textarea" title="Textarea" />
</Examples>

## API Reference [#api-reference]

<Reference name="input" />
