Bỏ qua đến nội dung
1.6k

Nhãn

Chú thích cho các trường nhập liệu, ô chọn, công tắc và nhóm nút radio — nhấp chuột sẽ kích hoạt điều khiển, được hiển thị bằng phông chữ tiêu đề theo phong cách tân thô mộc.

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

Label là dòng chú thích cho một điều khiển biểu mẫu — ghép nó với id của điều khiển, và mỗi lần bấm vào phần chữ sẽ focus hoặc bật tắt ô đó. Biến thể này là một thẻ <label> native đã được tạo kiểu, không phụ thuộc primitive nào, đặt trong phông tiêu đề neobrutalist.

Nên dùng khi:

  • Điều khiển đứng riêng — một checkbox, switch hay nhóm radio lẻ chưa cần đến cả một Field: ô đồng ý điều khoản, công tắc bật thông báo.
  • Hàng cài đặt — cặp switch kèm nhãn, nơi cả dòng chú thích đều là vùng bấm được.
  • Bố cục biểu mẫu tùy chỉnh — các dạng lưới hay xếp ngang mà cấu trúc xếp dọc của Field không phù hợp.

Cài đặt

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

Cài đặt các phụ thuộc sau:

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

Sao chép và dán đoạn mã sau vào dự án của bạn.

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 }

Cập nhật các đường dẫn import cho phù hợp với thiết lập dự án của bạn.

Cách dùng

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

Label trong một Field

Đối với các trường biểu mẫu, hãy dùng component Field, vốn đã tích hợp sẵn các component FieldLabel, FieldDescription và 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

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập

Label render một thẻ <label> native: cho htmlFor khớp với id của điều khiển (hoặc lồng điều khiển vào bên trong nhãn) là trình đọc màn hình sẽ đọc phần chữ đó như tên gọi truy cập được của điều khiển, còn khi bấm vào nhãn thì điều khiển được focus hoặc bật tắt. Phần kiểu dáng đã có select-none, nên bấm đúp vào nhãn cũng không chọn phần chữ. Thẻ <label> chỉ liên kết được với các điều khiển biểu mẫu — với widget tùy chỉnh, hãy trỏ aria-labelledby đến id của nhãn.

Tham chiếu API

Xem tài liệu Base UI Label để biết thêm thông tin.