next 13 with shadcn ui input field example

In this tutorial, we will see how to use input field in next js 13 with shadcn ui. First you need to setup next js 13 with shadcn ui project.

how to use shadcn ui in next js 13

Before use input field in next js 13 with shadcn ui you need to install npx shadcn-ui@latest add input field.

npx shadcn-ui@latest add input

npx shadcn-ui@latest add

Next 13 with Shadcn UI Input Field Example

1. Create next js 13 with shadcn ui input field using shadcn-ui Input component.

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

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

shadcn ui email input field

2. next js 13 with shadcn ui disabled input field.

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

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

shadcn ui disabled input field

3. next js 13 with shadcn ui file input field.

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>
  )
}

shadcn ui file input field

4. next js 13 with shadcn ui label with input field.

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>
  )
}

next js 13 shadcn ui label with input field

5. next js 13 with shadcn ui input field with button.

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>
  )
}