Lewati ke konten
1.6k

Label

Teks keterangan untuk kolom input, kotak centang, tombol geser, dan kelompok tombol radio — klik akan mengaktifkan elemen kontrol tersebut, ditampilkan dengan font judul bergaya neobrutalis.

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

Label memberi keterangan pada kontrol formulir — pasangkan dengan id kontrolnya, dan klik pada teks akan memfokuskan atau men-toggle kolom tersebut. Varian ini adalah elemen <label> natif yang diberi gaya tanpa dependensi primitif, ditata dengan font judul neobrutalis.

Gunakan komponen ini saat:

  • Kontrol mandiri — checkbox, switch, atau grup radio tunggal yang belum memerlukan Field lengkap: kotak persetujuan, toggle notifikasi.
  • Baris pengaturan — pasangan switch dan label dengan seluruh keterangan sebagai target klik.
  • Tata letak formulir kustom — grid dan susunan sebaris yang tidak cocok dengan struktur bertumpuk milik Field.

Instalasi

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/label.json
npx shadcn@latest add https://neobrutalism.com/r/base/label.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/label.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/label.json

Instal dependensi berikut:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Salin dan tempel kode berikut ke dalam proyek Anda.

components/ui/label.tsx
"use client"

import * as React from "react"
import { Label as LabelPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

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-none font-head 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 }

Perbarui jalur impor agar sesuai dengan pengaturan proyek Anda.

Penggunaan

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

Label di dalam Field

Untuk bidang formulir, gunakan komponen Field yang menyertakan komponen bawaan FieldLabel, FieldDescription, dan FieldError.

<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {

RTL

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas

Label merender elemen <label> natif: cocokkan htmlFor dengan id kontrolnya (atau sarangkan kontrol di dalam label) maka pembaca layar mengumumkan teksnya sebagai nama aksesibel kontrol tersebut, sementara klik pada label memfokuskan atau men-toggle-nya. Gayanya menyertakan select-none, sehingga mengklik dua kali label tidak menyeleksi teksnya. <label> hanya berasosiasi dengan kontrol formulir — untuk widget kustom, arahkan aria-labelledby ke id milik label.

Referensi API

Lihat dokumentasi Base UI Label untuk informasi selengkapnya.