Label

<Label />TailwindCSS ModulesProduction Stable

Accessible, foundational form label primitive engineered on Radix UI Label. Integrates automatic semantic required asterisks, optionality badges, helper tooltips, disabled sync, and strict baseline typography alignment across all Coloxo control heights.

InstallationColoxo CLI

npx coloxo add label --style coloxo-css

ES Module ImportPlayground / npm package

import { Label } from '@coloxo/ui';

Package: @coloxo/uiBundle: 0.58 KB

Design Tokens:

--cx-label-font-size--cx-label-font-weight--cx-label-color-required--cx-label-color-optional

01 / Visual architecture

1. Indicator & Marker Architecture

Labels communicate validation expectations immediately before input engagement. Coloxo UI standardizes required asterisks, optional annotations, contextual helpers, and disabled synchronization.

Standard Neutral

Neutral-800

Default baseline weight 500. Clear contrast ratio exceeding 12:1 against light surface.

Username

<Label htmlFor="user">Username</Label>

Required Marker

aria-hidden="*"

Appends semantic asterisk with dedicated red tone. Automatically syncs required state to screen reader trees.

Email Address

<Label htmlFor="email" required>Email Address</Label>

Optional Marker

muted caption

Affixes a subtle "(optional)" token in 12px secondary typography to reduce visual noise on non-mandatory fields.

Organization Name(optional)

<Label htmlFor="org" optional>Organization Name</Label>

Contextual Helper

Micro-action

Inject inline informational icons for enterprise compliance explanations without shifting vertical layout.

Tax Identification Number

<Label required tooltip="…">Tax ID</Label>

Disabled State

not-allowed

When the coupled control is disabled, the label automatically demotes contrast to neutralize user affordance.

Global Routing Prefix

<Label htmlFor="prefix" disabled>Prefix</Label>

Inline Metadata Tag

Polymorphic

Labels flexibly nest enterprise pill indicators, counter badges, or security tier statuses cleanly on the trailing edge.

Public TLS Certificate RSA 4096

<Label required>TLS Cert <Badge>RSA 4096</Badge></Label>

02 / Geometric rhythms

2. Semantic Alignment & Control Sizing

Optical parity across high-density enterprise software requires strict alignment between Label scale and paired Form Control height. Coloxo enforces a 6px baseline gap token across default control variants.

Size tier	Control height	Label typography	Vertical gap	Live optical specimen
xs	32px	12px / 16px LH --cx-label-xs	gap-1 (4px)	Specimen XS
sm	36px	13px / 18px LH --cx-label-sm	gap-1.5 (6px)	Specimen SM
md · Standard	40px	14px / 20px LH --cx-label-md	gap-1.5 (6px)	Specimen MD
lg	44px	15px / 22px LH --cx-label-lg	gap-2 (8px)	Specimen LG
xl	48px	16px / 24px LH --cx-label-xl	gap-2 (8px)	Specimen XL

03 / DOM architecture

3. Radix UI Primitive & A11Y Contract

Coloxo Label wraps Radix UI's @radix-ui/react-label, guaranteeing synthetic event forwarding to non-native controls, selection prevention, and standard keyboard delegation.

Rendered DOM element tree

Validated HTML5

Email Address

Automatic ARIA synchronization ensures that double-clicking text never causes accidental browser highlights, while maintaining native programmatic focus transfer.

React canonical pattern

Standard implementation binding native text inputs, Radix Select primitives, and checkbox tiles. Defaults: required=false, optional=false, user-select: none.

Enterprise VAT Number

04 / Sandbox workspace

4. Interactive Live Playground

Configure label attributes, toggle state variations, and evaluate the rendered markup in real-time.

Props inspector

Label Content (children)

Size

Paired Control Type

required

optional

Helper Tooltip

disabled state

Visual Render CanvasSIZE MD · REQUIRED

Corporate Email Address

tsx

1<Label2  htmlFor="demo-target"3  required4  tooltip="Helper guidance"5>6  Corporate Email Address7</Label>

05 / Theme system

5. Enterprise Dark Theme Matrix

In zero-light developer workstation environments, Coloxo UI transitions the label baseline to high-emittance Slate-100 and elevates the required asterisk contrast to 7.2:1 against the #0B1120 bedrock.

Dark Bedrock Canvas (#0B1120)

14.6:1 Contrast (AAA) · Zero Eye Strain

Color: #F1F5F9 (Slate-100)

Primary IAM Role Admin

Primary IAM Role

Asterisk: #EF4444 (7.2:1 Ratio)

Database Connection URI

Required specimen

Optional: #94A3B8 (Slate-400)

Replication Lag Quorum(optional)

Optional specimen

06 / Application patterns

6. Enterprise Form Compositions

Complete reference implementations illustrating how Label harmonizes across high-density administrative portals, compliance workflows, and mission-critical payment configurations.

SSO Operator Provisioning

Federated Active Directory Link

High Security

Full Legal Name

Corporate Email

Backup Hardware Token Phone(optional)

Cryptographic Clearance Level

Settlement Account Configuration

Fedwire & SWIFT Network Protocols

ISO 20022

Receiving Depository Institution

Routing Transit # ABA

Legacy Correspondent Route

07 / Compliance & standards

7. A11Y & Screen Reader Contract

Every Coloxo Form Label undergoes automated testing with screen readers (NVDA, JAWS, VoiceOver) to prevent redundant spoken punctuation and guarantee WCAG 2.1 AA and AAA standard parity.

Radix Primitive Safety

Label utilizes synthetic event delegation. Clicking the label forwards immediate programmatic focus to linked inputs without triggering text selection or false double-tap zooms on mobile touch viewports.

Accessible Asterisk Markers

The red asterisk is rendered inside aria-hidden="true". Screen readers will not announce the literal string "star", relying instead on the paired input's aria-required="true".

Subpixel Optical Rhythm

Fixed line-heights and a strict 6px bottom margin ensure that swapping an input from default to required or error never produces Cumulative Layout Shift (CLS score: 0.000).

Props

Name	Type	Default	Description
htmlFor	string	—	Associates the label with a control id.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md	Typography scale aligned to paired control heights (12/16–16/24).
required	boolean	—	Shows a red required asterisk (aria-hidden).
optional	boolean	—	Shows muted (optional) when not required.
disabled	boolean	—	Demotes contrast when the paired control is disabled.
tooltip	ReactNode	—	Inline helper tooltip via trailing info icon.
tooltipSupportingText	ReactNode	—	Optional supporting line under tooltip title.
children	ReactNode	—	Label text; may nest Badge or other inline metadata.