Label

A form label component. for points to the target control's id, and clicking focuses the control; supports a required asterisk and its position.

Basic usage

Basic label

Name

Example

Required asterisk

required appends a * marker; position places the asterisk before (before) or after (after, default) the text.

Required asterisk

Email

Example

Asterisk before

Phone number

Example

Plain text label

Without for, only text is rendered and clicks don't forward focus; long text wraps instead of overflowing.

Plain text & long text

Plain text label without forThis is an especially long label text, used to demonstrate that long text wraps automatically without overflowing the container boundary. Please be patient while reading.

Example

Size

size controls the font size in three tiers: small for auxiliary text, medium (default) for base text, and large for emphasis — mapped to the --oas-font-size-sm / md / lg font tokens respectively.

Size tiers

Small labelMedium labelLarge label

Example

Weight

weight controls the font weight in two tiers: regular (default) and semibold for emphasis (font-weight: 600).

Weight tiers

Regular-weight labelSemibold emphasized label

Example

States

error renders validation-failure red text; disabled statically grays out (purely visual, doesn't block events — the associated control manages its own disabled); colon appends a colon after the text.

States

Failed validation labelDisabled labelLabel with colonRequired + colon

Example

Tooltip

The label itself has no tooltip attribute — the hint capability is achieved by composing with oas-tooltip (component wrapping component):

Compose with oas-tooltip

Username

Example

Color

color accepts 11 preset names (auto-adapting to light/dark themes) or any CSS color value (takes effect immediately, overriding presets and defaults). Text uses the compliant token:

Preset palette

Red labelGreen labelBlue label

Example

Custom color value

Teal label

Example

Alignment & wrapping (host CSS equivalents)

Text alignment and wrapping don't need component attributes — one line of host CSS does it:

Alignment & wrapping (host CSS)

Right-aligned labelNo-wrap label

Example

Required-mark forms (asterisk + position) are covered by required + position; the Field combo (label + error + description) is handled by oas-form-item.

API

oas-label

Attributes

Attribute	Description	Type	Default
colon	Append a colon (:) after the label text	boolean	—
color	Text color: accepts 11 preset names (mapped to --oas-preset-*-text compliant tokens) or any CSS color value	string	—
disabled	Disabled state (visual only: grayed out but does not block events; the associated control manages its own disabled)	boolean	—
error	Error state (red text)	boolean	—
for	Target control id; click forwards to getElementById(for).focus()	string	—
position	Position of the asterisk relative to the text	string	after
required	Append a required * marker (aria-hidden)	boolean	—
size	Label font-size step: small/medium (default)/large	string	—
weight	Label font weight: regular (default)/semibold	string	—

Slots

Name	Description
default	Label content (text / icons)

CSS Variables

CSS Variable	Default
--oas-label-color	var(--oas-color-text-primary)

Note: for is also synced to the native <label> for attribute; the click behavior is manually forwarded and can focus the target control across Shadow DOM. Double-clicking doesn't select text (consistent with mainstream behavior).