next 13 with shadcn ui label example

In this tutorial, we will see how to use label 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 label in next js 13 with shadcn ui you need to install npx shadcn-ui@latest add label.

npx shadcn-ui@latest add label

npx shadcn-ui@latest add

Next 13 with Shadcn UI Label Example

1. next js 13 with shadcn ui Label with Checkbox using shadcn-ui Checkbox, Label component.

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function LabelDemo() {
  return (
    <div>
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
    </div>
  )
}

next js 13 with shadcn ui label

2. next js 13 with shadcn ui simple Label for htmlFor.

import { Label } from "@/components/ui/label"

export default function LabelDemo() {
  return <Label htmlFor="email">Your email address</Label>
}

3. next js 13 with shadcn ui label with input.

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