Name : Input
Description : Displays a form input field or a component that looks like an input field.

---

### import

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

---

### use

```input.mdx
<Input />
```

---

### examples

```input-demo.tsx
import { Input } from "@/components/ui/input"

export default function InputDemo() {
  return <Input type="email" placeholder="Email" />
}
```

```input-disabled.tsx
import { Input } from "@/components/ui/input"

export default function InputDisabled() {
  return <Input disabled type="email" placeholder="Email" />
}
```

```input-file.tsx
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
    </div>
  )
}
```

```input-with-button.tsx
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function InputWithButton() {
  return (
    <div className="flex w-full max-w-sm items-center space-x-2">
      <Input type="email" placeholder="Email" />
      <Button type="submit">Subscribe</Button>
    </div>
  )
}
```

```input-with-label.tsx
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputWithLabel() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}
```

```input-with-text.tsx
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputWithText() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email-2">Email</Label>
      <Input type="email" id="email-2" placeholder="Email" />
      <p className="text-sm text-muted-foreground">Enter your email address.</p>
    </div>
  )
}
```
