form

Label

Renders an accessible label associated with form controls. Essential for form accessibility and usability.

Preview

A preview of the Label component with interactive controls.

Preview Code

Interactive

Installation

Add the Label component to your project.

Bash

ng g @ng-cn/core:c label

Usage

Import and use the Label component in your Angular application.

Template TypeScript

template.html

<div class="flex flex-col gap-2">
  <Label htmlFor="username">Username</Label>
  <Input type="text" id="username" placeholder="Enter username" />
</div>

Examples

Explore different variations and use cases for the Label component.

Basic

A simple label associated with an input.

Preview Code

Interactive

With Form Control

Label properly associated with different form controls.

Preview Code

Interactive

Required Field Indicator

Show required field with visual indicator.

Preview Code

Interactive

Disabled State

Label styling when associated control is disabled.

Preview Code

Interactive

With Checkbox

Label inline with checkbox control.

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`htmlFor`	`string`	—	The id of the associated form element.
`class`	`string`	—	Additional CSS classes.