Skip to content
navius

Components / Label

Label

Renders a label associated with a control.

Click the label above to focus the field.

razor
<NaviusLabel For="email" class="text-sm font-medium leading-none">
    Email address
</NaviusLabel>
<input id="email" type="email" class="..." />

Features

  • Associates with a control via For so clicking the label focuses it.
  • Prevents text selection when the label is double-clicked.
  • Forwards any extra attributes onto the underlying <label>.

Installation

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

Terminal bash
navius add label

Anatomy

Import the part and assemble it.

razor
@using Navius.Primitives.Components.Label

<NaviusLabel For="control-id">Label text</NaviusLabel>

API Reference

Root

Contains the content of the label. Renders a label element.

Prop Type Default
For string? -
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-navius-label] Present on the root element

Accessibility

Follows the native label element semantics. Set For to the id of the control so assistive technology announces the label as the control's accessible name.

Keyboard interactions

The label has no keyboard interactions of its own. Activating it with the pointer moves focus to, and where applicable activates, the associated control.