Label — Marai.UI

Overview

MLabel is a semantic <label> element that ships with sensible defaults: text-sm font-medium leading-none, plus peer-disabled:cursor-not-allowed peer-disabled:opacity-70 so it automatically dims when a sibling input is disabled. Use Class to add overrides, and For to associate the label with a form control.

Usage

Add the namespace import to use the component.

razor

@using Marai.UI.Components.MLabel

Basic Usage

A label renders with text-sm font-medium leading-none by default — Class adds further overrides:

Preview

Email address

razor

<MLabel Class="text-sm font-medium leading-none">Email address</MLabel>

Paired with Form Controls

Use the For parameter to create an accessible association between the label and form control. The value should match the id attribute of the associated control.

Preview

razor

<div class="flex flex-col gap-1.5 max-w-sm">
    <MLabel For="email">Email</MLabel>
    <MInput id="email" Type="email" Placeholder="you@example.com" />
</div>

Customization

Custom Tailwind CSS Classes

Use the Class parameter to add Tailwind CSS utilities. Classes are merged with the defaults using last-wins conflict resolution — override font size, weight, color, or spacing:

Preview

Large Bold Label Colored Label Uppercase Label

razor

<div class="flex flex-col gap-4">
    <MLabel Class="text-lg font-bold">Large Bold Label</MLabel>
    <MLabel Class="text-primary">Colored Label</MLabel>
    <MLabel Class="uppercase tracking-wide">Uppercase Label</MLabel>
</div>

Standard HTML Attributes

The MLabel component supports all standard HTML attributes through the AdditionalAttributes parameter. You can add any attribute directly on the component.

Preview

Username

razor

<MLabel For="username"
        aria-describedby="username-help"
        data-testid="username-label">
    Username
</MLabel>

Customization Examples

Font Size: Class="text-lg" or Class="text-xs"
Font Weight: Class="font-bold" or Class="font-normal"
Color: Class="text-primary" or Class="text-muted-foreground"
Text Transform: Class="uppercase" or Class="capitalize"
Letter Spacing: Class="tracking-wide"
Margins: Class="mb-2" for spacing

Common Examples

Multiple Form Fields

Preview

First name

Last name

razor

<div class="flex flex-col gap-4 max-w-sm">
    <div class="flex flex-col gap-1.5">
        <MLabel For="first-name">First name</MLabel>
        <MInput id="first-name" Placeholder="Jane" />
    </div>
    <div class="flex flex-col gap-1.5">
        <MLabel For="last-name">Last name</MLabel>
        <MInput id="last-name" Placeholder="Doe" />
    </div>
    <div class="flex flex-col gap-1.5">
        <MLabel For="email-field">Email</MLabel>
        <MInput id="email-field" Type="email" Placeholder="jane@example.com" />
    </div>
</div>

Required Field Indicator

Preview

Email *

razor

<div class="flex flex-col gap-1.5 max-w-sm">
    <MLabel For="required-field">
        Email <span class="text-red-600">*</span>
    </MLabel>
    <MInput id="required-field" Type="email" required />
</div>

With Help Text

Preview

Password

Must be at least 8 characters long.

razor

<div class="flex flex-col gap-1.5 max-w-sm">
    <MLabel For="password-field">Password</MLabel>
    <MInput id="password-field" Type="password" aria-describedby="password-help" />
    <p id="password-help" class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
</div>

Disabled Field

When the associated control is disabled, apply matching styling to the label:

Preview

Disabled field

razor

<div class="flex flex-col gap-1.5 max-w-sm">
    <MLabel For="disabled-field" Class="opacity-70 cursor-not-allowed">Disabled field</MLabel>
    <MInput id="disabled-field" Placeholder="Not available" Disabled="true" />
</div>

Accessibility

Always use the For parameter to associate labels with form controls
The For value must match the id of the associated input element
Clicking the label will focus the associated form control
Use descriptive label text that clearly identifies the form field purpose
Consider using aria-describedby to link labels with help text or validation messages
For required fields, include a visual indicator (e.g., asterisk) and consider aria-required on the input
Labels support all standard HTML attributes via AdditionalAttributes

API Reference

Parameter	Type	Default	Description
ChildContent	RenderFragment?	`null`	The label text or content rendered inside the label element.
For	string?	`null`	The ID of the form control this label is associated with. Maps to the HTML `for` attribute.
Class	string?	`null`	Additional CSS classes merged onto the label. Defaults to `text-sm font-medium leading-none` — user-supplied classes win all conflicts.
AdditionalAttributes	Dictionary<string, object>?	`null`	Arbitrary HTML attributes (e.g., `aria-describedby`, `data-testid`) passed to the root element.

Best Practices

Always provide a For parameter that matches the associated input's id
Keep label text concise and descriptive
Place labels directly above or to the left of form controls
Use consistent styling for labels across your application
Include visual indicators (asterisks) for required fields
Pair labels with help text using aria-describedby for complex fields
Test keyboard navigation to ensure labels improve form accessibility
Consider adding Class="mb-2" for consistent spacing below labels