Label
Accessible form labels
The Label component provides accessible labels for form inputs with proper association and styling.
Basic Usage
<div class="space-y-2">
<Label>Email</Label>
<Input Type="email" Placeholder="email@example.com" />
</div>With Input Association
<div class="space-y-2">
<Label For="email">Email</Label>
<Input Id="email" Type="email" Placeholder="email@example.com" />
</div>With Checkbox
<div class="flex items-center space-x-2">
<Checkbox @bind-Checked="acceptTerms" />
<Label>I accept the terms and conditions</Label>
</div>
@code {
private bool acceptTerms = false;
}With Switch
<div class="flex items-center space-x-2">
<Switch @bind-Checked="notificationsEnabled" />
<Label>Enable notifications</Label>
</div>
@code {
private bool notificationsEnabled = false;
}Required Field Indicator
<div class="space-y-2">
<Label>
Email
<span class="text-destructive">*</span>
</Label>
<Input Type="email" Required />
</div>API Reference
| Property | Type | Default | Description |
|---|---|---|---|
For | string | "" | Associates label with input via id |
ChildContent | RenderFragment | null | Label text content |
Accessibility
The Label component includes:
- Proper semantic HTML (
<label>) - Association with inputs via
ForandIdattributes - Screen reader compatibility
- Proper styling for disabled states
Installation
shellui add label