Label kontrol, Inter Medium 14/20. Dibangun di atas Radix Label, jadi klik pada teks memfokuskan kolomnya.
npx shadcn@latest add @glc/labelnpm install @radix-ui/react-labelSetiap komponen bergantung pada glc-theme. Lewati langkah ini kalau sudah pernah dijalankan.
npx shadcn@latest add @glc/glc-themeimport * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/registry/glc/lib/utils"
/** Control label — Inter Medium 14/20, the file's label role. */
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-5 font-medium text-foreground 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 }Berkas di atas meng-import @/registry/glc/lib/utils. Ubah menjadi lokasi cn di proyekmu — biasanya @/lib/utils. CLI melakukan ini otomatis.
import { Label } from "@/components/ui/label"
<Label htmlFor="npwp">NPWP</Label>import { Input } from "@/registry/glc/ui/input"
import { Label } from "@/registry/glc/ui/label"
/**
* `htmlFor` is what makes the label clickable and what ties it to the field
* for assistive tech. It is not optional.
*/
export function LabelDemo() {
return (
<div className="flex w-full max-w-sm flex-col gap-2">
<Label htmlFor="label-demo-input">Nomor faktur</Label>
<Input id="label-demo-input" placeholder="INV-2401" />
</div>
)
}htmlFor bukan opsional
htmlFor yang cocok dengan id kolomnya, label hanyalah teks: mengkliknya tidak memfokuskan apa pun, dan pembaca layar mengumumkan kolom itu tanpa nama.import { Input } from "@/registry/glc/ui/input"
import { Label } from "@/registry/glc/ui/label"
/**
* The label dims itself when the control it follows is disabled — that is the
* `peer-disabled:` half of its class list, so the markup order matters: the
* input has to be the `peer` and come first in the DOM.
*/
export function LabelDisabled() {
return (
<div className="flex w-full max-w-sm flex-col-reverse gap-2">
<Input id="label-disabled-input" className="peer" disabled defaultValue="JKT-01" />
<Label htmlFor="label-disabled-input">Kode cabang</Label>
</div>
)
}Mekanismenya adalah peer-disabled:, jadi urutan DOM menentukan: kolomnya harus diberi kelas peer dan berada sebelum label. Contoh di atas membalik urutan visualnya dengan flex-col-reverse supaya DOM-nya tetap benar sementara label tetap tampil di atas.
Alternatifnya, bungkus keduanya dalam elemen ber-data-disabled="true" dan beri kelas group — jalur group-data-[disabled=true]: juga sudah disiapkan.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
htmlFor | string | — | id kontrol yang dilabeli. Praktis wajib diisi. |
className | string | — | Digabung terakhir lewat cn(), jadi bisa menimpa kelas bawaan. |
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/registry/glc/lib/utils"
/** Control label — Inter Medium 14/20, the file's label role. */
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-5 font-medium text-foreground 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 }