Label

Renders an accessible label associated with form controls.

Your email

Installation

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

global

# If you have installed galaxy-design globally
galaxy-design add label

API Reference

Props

Prop	Type	Default	Description	Frameworks
htmlFor	string	-	ID of the element the label is associated with	React, React Native
for	string	-	ID of the element the label is associated with	Vue, Angular, Flutter
className	string	''	CSS class names for the label	React, React Native
class	string	''	CSS class names for the label	Vue, Angular, Flutter
children	ReactNode	-	Label content	React, React Native
text	string	-	Label text content	Flutter

Usage

Basic Form

Vue

<template>
  <div class="space-y-4">
    <div class="space-y-2">
      <Label for="username">Username</Label>
      <Input id="username" placeholder="johndoe" />
    </div>
    <div class="space-y-2">
      <Label for="password">Password</Label>
      <Input id="password" type="password" />
    </div>
  </div>
</template>

React

<div className="space-y-4">
  <div className="space-y-2">
    <Label htmlFor="username">Username</Label>
    <Input id="username" placeholder="johndoe" />
  </div>
  <div className="space-y-2">
    <Label htmlFor="password">Password</Label>
    <Input id="password" type="password" />
  </div>
</div>

Angular

<div class="space-y-4">
  <div class="space-y-2">
    <ui-label for="username">Username</ui-label>
    <ui-input id="username" placeholder="johndoe" />
  </div>
  <div class="space-y-2">
    <ui-label for="password">Password</ui-label>
    <ui-input id="password" type="password" />
  </div>
</div>

With Required Indicator

Vue

<template>
  <div class="space-y-2">
    <Label for="required-field">
      Name
      <span class="text-destructive">*</span>
    </Label>
    <Input id="required-field" required />
  </div>
</template>

React

<div className="space-y-2">
  <Label htmlFor="required-field">
    Name
    <span className="text-destructive">*</span>
  </Label>
  <Input id="required-field" required />
</div>

Angular

<div class="space-y-2">
  <ui-label for="required-field">
    Name
    <span class="text-destructive">*</span>
  </ui-label>
  <ui-input id="required-field" required />
</div>

With 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"
    >
      Accept terms and conditions
    </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"
  >
    Accept terms and conditions
  </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"
  >
    Accept terms and conditions
  </ui-label>
</div>

API Reference

Props

Prop	Type	Default	Description
for / htmlFor	string	-	The id of the form control to associate with
class / className	string	-	Additional CSS classes

Framework-Specific

Vue

• Uses Radix Vue Label component
• Props: for, asChild

React

• Uses Radix UI Label component
• Props: htmlFor, asChild

Angular

• Custom implementation with HostBinding
• Props: for, class

Accessibility

• Properly associates label with form control using for attribute
• Supports click to focus associated input
• Works with screen readers
• Supports disabled state styling (peer-disabled)

Styling

The Label component uses these base styles:

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

You can override or extend these styles by passing custom classes.

Related Components

• Input - Text input field
• Checkbox - Checkbox input
• Radio Group - Radio button group
• Select - Select dropdown

Author

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

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

License

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