Components / Label

Label

Renders an accessible label associated with a control.

Email address

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

Install the brain, or copy just this primitive in with the CLI.

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.