@pmeig/ngb-label

A powerful Angular library that provides Bootstrap-styled label components with advanced features like floating labels, smart input type detection, and checkbox/radio button styling.

Installation

  npm install @pmeig/ngb-label

Features

• 🎯 BLabelDirective - Smart label directive with automatic input type detection
• 🏷️ BLabelFloatingDirective - Floating label functionality with positioning options
• ☑️ BLabelCheckDirective - Checkbox and radio button label styling with switch support
• 🔘 BLabelCheckButtonDirective - Button-styled checkbox/radio labels with color variants
• ✨ Automatic Type Detection - Automatically applies correct Bootstrap classes based on input type
• 🎨 Floating Labels - Bootstrap 5.3.3 floating label support with positioning
• 🔄 Dynamic Positioning - Start/end label positioning with input group support
• 🎨 Bootstrap 5.3.3 compatible styling
• 🚀 Angular 21.2.0 support with signals
• 📱 Responsive design
• ♿ Accessibility friendly
• 🛠️ Smart parent element management

Usage

Import the Module

import { LabelMaterial } from '@pmeig/ngb-label';

@NgModule({
imports: [
LabelMaterial
],
// ...
})
export class AppModule { }

Basic Label Usage

<!-- By default is floating labels -->
<input type="text" id="username" label="Username" class="form-control">

Label Positioning

<input type="text" id="floatingInput" class="form-control" label="Username" 
       placeholder="Username" floating="false">

<!-- Right label -->
<input type="text" id="rightLabel" class="form-control" label="Username" floating="false"
       placeholder="Username" label-position="end">

API Reference

BLabelDirective

Applied automatically to label[for] elements.

| Property | Type | Description | |----------|------|-------------| | for | Element | Target input element (can override HTML for attribute) |

BLabelFloatingDirective

Applied to inputs with label attribute (excludes checkboxes, radios, and ranges).

| Property | Type | Default | Description | |----------|------|---------|-------------| | floating | boolean | true | Enables floating label behavior | | label-position | 'start' \| 'end' | 'start' | Label position when not floating |

BLabelCheckDirective

Applied to checkbox/radio inputs with label attribute (excludes button-type).

| Property | Type | Default | Description | |----------|------|---------|-------------| | switch | boolean | false | Enables Bootstrap switch styling for checkboxes |

BLabelCheckButtonDirective

Applied to checkbox/radio inputs with label and label-type="btn".

| Property | Type | Default | Description | |----------|------|---------|-------------| | label-btn-outline | boolean | false | Uses outline button styling | | label-btn-color | ColorAttribute | undefined | Button color variant |

How It Works

Automatic Type Detection

The label directives automatically:

1. Detect input types: Examines the associated input element's type
2. Apply appropriate classes: Uses form-label for regular inputs, form-check-label for checkboxes/radios
3. Handle click events: Properly associates labels with custom elements
4. Manage parent containers: Creates and manages form floating/check containers

Floating Label Behavior

• Default floating: Labels float above inputs when focused or filled
• Position control: label-position controls placement when floating is disabled
• Dynamic insertion: Labels are dynamically positioned in the DOM

Bootstrap Classes Support

This library generates and works with standard Bootstrap 5 form classes:

• form-label - Standard form labels
• form-check-label - Checkbox/radio labels
• form-floating - Floating label containers
• form-check - Checkbox/radio containers
• form-switch - Switch-style checkboxes
• btn, btn-* - Button-styled labels
• btn-outline-* - Outline button variants
• btn-check - Hidden button-check inputs

Dependencies

• Angular: >=21.2
• @angular/common: >=21.2
• @pmeig/ngb-core: ^2.0.0
• tslib: ^2.3.0

Compatibility

• Angular: 21.2
• Bootstrap: 5.3.3+
• TypeScript: 5.8.3+
• Modern browsers (Chrome, Firefox, Safari, Edge)

Troubleshooting

Common Issues

Labels not showing correct styling

• Ensure the for attribute matches the input's id
• Verify input type detection is working correctly

Floating labels not working

• Ensure placeholder text is provided for floating labels
• Check that the input has the form-control class
• Verify the parent container structure

Button labels not applying colors

• Ensure label-type="btn" is set
• Check color attribute values are valid Bootstrap colors
• Verify button label directives are being applied

Checkbox/radio labels misaligned

• Check parent container has proper Bootstrap form classes
• Ensure switch functionality is properly configured
• Verify checkbox/radio styling directives are active

License

This project is licensed under the MIT License.

Support

For issues and questions, please open an issue on the GitHub repository.

Known issues (2.0.0)

Found by reading the code (not reproduced in a running app):

• label[for] looks its input up too early: the constructor calls document.getElementById(for) while the view is being created, before the elements are attached to the document; when it returns null and [for] is not bound, onInit reads target().tagName on null and throws.
• [for] is typed Element but Angular binds [for]="'id'" (a string) to it: the tagName checks then fail silently (no click forwarding, always form-label).