Label

Render nhãn có khả năng tiếp cận được liên kết với các form controls.

Your email

Cài Đặt

npm

npx @galaxy-stack/nebula-cli@latest add label

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add label

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add label

bun

bunx @galaxy-stack/nebula-cli@latest add label

API Reference

Props

Prop	Kiểu	Mặc định	Mô tả	Frameworks
htmlFor	string	-	ID của element mà label liên kết với	React, React Native
for	string	-	ID của element mà label liên kết với	Vue, Angular, Flutter
className	string	''	Tên class CSS cho label	React, React Native
class	string	''	Tên class CSS cho label	Vue, Angular, Flutter
children	ReactNode	-	Nội dung label	React, React Native
text	string	-	Nội dung text label	Flutter

Sử Dụng

Form Cơ Bản

Vue

<template>
  <div class="space-y-4">
    <div class="space-y-2">
      <Label for="username">Tên đăng nhập</Label>
      <Input id="username" placeholder="johndoe" />
    </div>
    <div class="space-y-2">
      <Label for="password">Mật khẩu</Label>
      <Input id="password" type="password" />
    </div>
  </div>
</template>

React

<div className="space-y-4">
  <div className="space-y-2">
    <Label htmlFor="username">Tên đăng nhập</Label>
    <Input id="username" placeholder="johndoe" />
  </div>
  <div className="space-y-2">
    <Label htmlFor="password">Mật khẩu</Label>
    <Input id="password" type="password" />
  </div>
</div>

Angular

<div class="space-y-4">
  <div class="space-y-2">
    <ui-label for="username">Tên đăng nhập</ui-label>
    <ui-input id="username" placeholder="johndoe" />
  </div>
  <div class="space-y-2">
    <ui-label for="password">Mật khẩu</ui-label>
    <ui-input id="password" type="password" />
  </div>
</div>

Với Dấu Bắt Buộc

Vue

<template>
  <div class="space-y-2">
    <Label for="required-field">
      Họ tên
      <span class="text-destructive">*</span>
    </Label>
    <Input id="required-field" required />
  </div>
</template>

React

<div className="space-y-2">
  <Label htmlFor="required-field">
    Họ tên
    <span className="text-destructive">*</span>
  </Label>
  <Input id="required-field" required />
</div>

Angular

<div class="space-y-2">
  <ui-label for="required-field">
    Họ tên
    <span class="text-destructive">*</span>
  </ui-label>
  <ui-input id="required-field" required />
</div>

Với Checkbox

Vue

<template>
  <div class="flex items-center space-x-2">
    <Checkbox id="terms" />
    <Label
      for="terms"
      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
    >
      Chấp nhận điều khoản và điều kiện
    </Label>
  </div>
</template>

React

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label
    htmlFor="terms"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Chấp nhận điều khoản và điều kiện
  </Label>
</div>

Angular

<div class="flex items-center space-x-2">
  <ui-checkbox id="terms" />
  <ui-label
    for="terms"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Chấp nhận điều khoản và điều kiện
  </ui-label>
</div>

Tham Chiếu API

Props

Prop	Kiểu	Mặc định	Mô tả
for / htmlFor	string	-	Id của form control để liên kết với
class / className	string	-	CSS classes bổ sung

Đặc Biệt Theo Framework

Vue

• Sử dụng component Label của Radix Vue
• Props: for, asChild

React

• Sử dụng component Label của Radix UI
• Props: htmlFor, asChild

Angular

• Implementation tùy chỉnh với HostBinding
• Props: for, class

Khả Năng Tiếp Cận

• Liên kết đúng label với form control sử dụng thuộc tính for
• Hỗ trợ click để focus input liên kết
• Hoạt động với screen readers
• Hỗ trợ styling trạng thái disabled (peer-disabled)

Tạo Kiểu

Label component sử dụng các style cơ bản:

text-sm font-medium leading-none
peer-disabled:cursor-not-allowed
peer-disabled:opacity-70

Bạn có thể override hoặc mở rộng các styles này bằng cách truyền custom classes.

Components Liên Quan

• Input - Trường nhập văn bản
• Checkbox - Checkbox input
• Radio Group - Nhóm radio button
• Select - Select dropdown

Tác Giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy Phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)