Reddot UI Library

Docs
Label

Label

Renders an accessible label associated with controls.

SourceApi

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/label.json

Usage

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Your email address</Label>

Examples

Default

With Checkbox

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
 
export function LabelDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

With Input

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
 
export function LabelDemo() {
  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>
  )
}

References