<div class="flex items-center gap-2">
<Checkbox Id="terms" />
<Label For="terms">Accept terms and conditions</Label>
</div>Installation
Install the label component using the command or manual steps.
blazor-shadcn add labelUsage
@using BlazorShadcn.Components.UI<Label For="email">Your email address</Label>Label in Field
The Field component family builds on top of label semantics for accessible form groups and richer form layouts.
<FieldSet>
<FieldLegend>Payment Method</FieldLegend>
<FieldDescription>All transactions are secure and encrypted.</FieldDescription>
<FieldGroup>
<Field>
<FieldLabel For="card-name">Name on Card</FieldLabel>
<Input id="card-name" Placeholder="Evil Rabbit" />
</Field>
<Field>
<FieldLabel For="card-number">Card Number</FieldLabel>
<Input id="card-number" Placeholder="1234 5678 9012 3456" />
<FieldDescription>Enter your 16-digit card number.</FieldDescription>
</Field>
<div class="grid grid-cols-3 gap-4">
<Field>
<FieldLabel For="exp-month">Month</FieldLabel>
<Select Class="w-full">
<SelectTrigger Id="exp-month" Class="w-full">
<SelectValue Placeholder="MM" />
</SelectTrigger>
<SelectContent>
<SelectItem Value="01" Text="01">01</SelectItem>
<SelectItem Value="02" Text="02">02</SelectItem>
<SelectItem Value="03" Text="03">03</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel For="exp-year">Year</FieldLabel>
<Select Class="w-full">
<SelectTrigger Id="exp-year" Class="w-full">
<SelectValue Placeholder="YYYY" />
</SelectTrigger>
<SelectContent>
<SelectItem Value="2026" Text="2026">2026</SelectItem>
<SelectItem Value="2027" Text="2027">2027</SelectItem>
<SelectItem Value="2028" Text="2028">2028</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel For="cvv">CVV</FieldLabel>
<Input id="cvv" Placeholder="123" />
</Field>
</div>
</FieldGroup>
</FieldSet>