Label
Renders an accessible label associated with form controls.
Basic Usage
Label associated with an input field using the For parameter.
Form Fields
Labels with various input types.
Required Field Indicators
Adding visual indicators for required fields.
Checkbox Labels
Labels used with checkboxes for clickable selection.
Disabled State
Label automatically styles when associated control is disabled (using peer-disabled).
Notice how the label appears muted when the input is disabled.
Custom Styling
Override label styles with the Class parameter.
Labels with Descriptions
Combining labels with help text for better UX.
This is your public display name. It can be your real name or a pseudonym.
Brief description for your profile. Max 160 characters.
Complete Form Example
Real-world form with multiple labeled fields.
Accessibility Notes
Best practices for accessible labels.
✓ Always use For attribute: Associate labels with form controls explicitly.
✓ Descriptive text: Labels should clearly describe the form field's purpose.
✓ Required indicators: Use visual indicators for required fields, but also use HTML5 required attribute.
✓ Help text: Place additional context below the input using aria-describedby.
✓ Error messages: Link errors to inputs with aria-describedby for screen readers.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| For | string? | — | The ID of the form element this label is associated with (maps to htmlFor). Clicking the label will focus the associated control. |
| Class | string? | — | Additional CSS classes to apply to the label element. |
| ChildContent | RenderFragment? | — | The content to display inside the label (text, icons, indicators, etc.). |