Label Component – UI Components

Label

Gives the label a distinct look and provides accessibility for form controls.

About

The Label component is used to provide a caption for an item in a user interface. It is essential for accessibility, as it allows screen readers to describe the purpose of form elements. Spartan UI labels are designed to be clear, consistent, and easy to style.

Installation

Run the following command to install the label component:

Usage

label-usage.ts

Default

A standard label used with a checkbox for interactive forms.

Accept terms and conditions

With Input

Using labels with text inputs to create clear and structured forms.

Username

Choose a unique username that represents you.

Required Fields

Indicate mandatory fields visually using markers like asterisks within the label.

Email Address *

We need your email for account verification.

Variants & Colors

Apply semantic colors to labels to convey additional meaning (info, success, destructive).

Email (Blue)

Success (Green)

Warning (Amber)

Destructive (Red)

API Reference

Helm API

The HlmLabel directive provides the styling for the label element.

Class	Selector	Description
HlmLabel	[hlmLabel]	Applies spartan/ui styling to a native label element.