Yugen UI

Label

Label đặt tên cho một control để người dùng biết cần nhập hoặc chọn gì.

Label của Fluent có ba cỡ chữ, hai độ đậm, dấu * cho trường bắt buộc và trạng thái disabled. Khi dùng Field, label đã được tạo sẵn — chỉ dùng Label rời khi tự dựng bố cục form.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Label } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Kích thước

small (12px), medium (14px, mặc định), large (16px semibold).

Bắt buộc & disabled

required thêm dấu * màu danger; disabled làm mờ nhãn.

Gắn với ô nhập

Liên kết bằng htmlFor + id (useId) để bấm nhãn là focus vào ô.

Cách dùng

Nên
  • Viết nhãn ngắn gọn, viết hoa chữ cái đầu.
  • Luôn liên kết nhãn với control bằng htmlFor (hoặc dùng Field).
  • Đánh dấu trường bắt buộc bằng required thay vì ghi chữ “(bắt buộc)”.
Không nên
  • Không dùng Label làm tiêu đề section — dùng type ramp subtitle.
  • Không kết thúc nhãn bằng dấu hai chấm.
  • Không tô màu brand cho nhãn.

Props

Prop · KiểuMặc địnhMô tả
size"small" | "medium" | "large"Mặc định: "medium"Cỡ chữ 12 / 14 / 16px (large mặc định semibold).
weight"regular" | "semibold"Mặc định: —Độ đậm; mặc định theo size.
requiredboolean | ReactNodeMặc định: —Hiện dấu * (hoặc ký hiệu tuỳ chọn) màu danger.
disabledbooleanMặc định: —Chữ màu foreground-disabled.
htmlForstringMặc định: —id của control được gắn nhãn.