Label

จาก shadcn

ป้ายชื่อของช่องฟอร์ม เชื่อมกับช่องข้อมูลผ่าน htmlFor เพื่อการเข้าถึง หรือครอบตัวควบคุม เช่น ช่องกาติ๊กเพื่อให้คลิกได้ทั้งข้อความ

ชื่อผู้อนุมัติ

ยอมรับเงื่อนไขการกู้กองทุน ตัวเลือกสำหรับกลุ่มที่ได้สิทธิ์พิเศษ (ปิดอยู่)

ติดตั้ง

Terminal

pnpm dlx shadcn@latest add @whereui/label

ต้องผูก registry และติดตั้ง @whereui/theme นำหน้าเสมอเมื่อติดตั้งครั้งแรก

การใช้งาน

import { Label } from "@/components/ui/label"import { Input } from "@/components/ui/input"<Label htmlFor="name">ชื่อ</Label><Input id="name" />

ข้อควรรู้

ครอบตัวควบคุมโดยตรง (เช่น Checkbox) เพื่อให้คลิกข้อความแล้วเลือกได้เช่นกัน
เมื่อตัวควบคุมถูกปิดใช้งาน Label จะจางลงอัตโนมัติ

ซอร์สโค้ด

components/ui/label.tsx

"use client"import * as React from "react"import { cn } from "cn"function Label({ className, ...props }: React.ComponentProps<"label">) {  return (    <label      data-slot="label"      className={cn(        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",        className      )}      {...props}    />  )}export { Label }