Label overview
<tng-label> gives you TailNG’s default label styling and required marker while keeping the underlying native label behavior intact. Use it when you want a styled label surface without dropping into the headless directive.
Component import
ts
import { TngInputComponent, TngLabelComponent } from '@tailng-ui/components';
Label variants
The label component keeps the same API while the surrounding field shell changes between plain CSS and Tailwind CSS.
Label stack (Plain-CSS)
Label stack (Tailwind CSS)
Accessibility baseline
- Use
forIdso the internal label forwards a nativeforattribute. - Keep
requiredoraria-requiredon the actual control; the component marker is visual. - Use the headless label directive when you need wrapped-control patterns or direct selector ownership.