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

API

Attributes

Attribute	Description	Type	Default
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	—

Slots

Name	Description
default	—

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.