Label
Accessible form label component for input association.
The Label component provides accessible labels for form inputs with proper association and styling.
Installation
shellui add labelUsage
Basic
<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 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" />
</div>API Reference
| Parameter | Type | Default | Description |
|---|---|---|---|
For | string | "" | Associates label with an input via id |
ChildContent | RenderFragment | null | Label text content |
Accessibility
- Uses semantic
<label>element - Associates with inputs via
For/Idattributes - Screen reader compatible
- Proper styling for disabled states