Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Payment Method

All transactions are secure and encrypted.

Billing Address

The billing address associated with your payment method.

Same as shipping address

<form>
    <FieldGroup>
        <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" required />
                </Field>
                <Field>
                    <FieldLabel For="card-number">Card Number</FieldLabel>
                    <Input id="card-number" Placeholder="1234 5678 9012 3456" required />
                    <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" DefaultValue="">
                            <SelectTrigger Id="exp-month" Class="w-full">
                                <SelectValue Placeholder="MM" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem Value="01">01</SelectItem>
                                <SelectItem Value="02">02</SelectItem>
                                <SelectItem Value="03">03</SelectItem>
                            </SelectContent>
                        </Select>
                    </Field>
                    <Field>
                        <FieldLabel For="exp-year">Year</FieldLabel>
                        <Select Class="w-full" DefaultValue="">
                            <SelectTrigger Id="exp-year" Class="w-full">
                                <SelectValue Placeholder="YYYY" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem Value="2026">2026</SelectItem>
                                <SelectItem Value="2027">2027</SelectItem>
                                <SelectItem Value="2028">2028</SelectItem>
                            </SelectContent>
                        </Select>
                    </Field>
                    <Field>
                        <FieldLabel For="cvv">CVV</FieldLabel>
                        <Input id="cvv" Placeholder="123" required />
                    </Field>
                </div>
            </FieldGroup>
        </FieldSet>

        <FieldSeparator />

        <FieldSet>
            <FieldLegend>Billing Address</FieldLegend>
            <FieldDescription>The billing address associated with your payment method.</FieldDescription>
            <FieldGroup>
                <Field Orientation="horizontal">
                    <Checkbox id="same-as-shipping" DefaultChecked="true" />
                    <FieldLabel For="same-as-shipping" Class="font-normal">
                        Same as shipping address
                    </FieldLabel>
                </Field>
            </FieldGroup>
        </FieldSet>

        <Field Orientation="horizontal">
            <Button Type="submit">Submit</Button>
            <Button Variant="@Button.ButtonVariant.Outline" Type="button">Cancel</Button>
        </Field>
    </FieldGroup>
</form>

Installation

Install the field component using the command or manual steps.

blazor-shadcn add field

Usage

@using ShadcnBlazor.Components.UI

<FieldSet>
    <FieldLegend>Profile</FieldLegend>
    <FieldDescription>This appears on invoices and emails.</FieldDescription>
    <FieldGroup>
        <Field>
            <FieldLabel For="name">Full name</FieldLabel>
            <Input id="name" Placeholder="Evil Rabbit" />
            <FieldDescription>This appears on invoices and emails.</FieldDescription>
        </Field>
        <Field data-invalid="true">
            <FieldLabel For="username">Username</FieldLabel>
            <Input id="username" aria-invalid="true" />
            <FieldError>Choose another username.</FieldError>
        </Field>
        <Field Orientation="horizontal">
            <Switch id="newsletter" />
            <FieldLabel For="newsletter">Subscribe to the newsletter</FieldLabel>
        </Field>
    </FieldGroup>
</FieldSet>

Anatomy

The Field family is designed for composing accessible forms with labels, controls, descriptions, and validation messaging.

<Field>
    <FieldLabel For="input-id">Label</FieldLabel>
    <Input id="input-id" />
    <FieldDescription>Optional helper text.</FieldDescription>
    <FieldError>Validation message.</FieldError>
</Field>

Field is the core wrapper for a single field.

FieldContent groups a title, label, description, and error when the control sits beside the text.

Wrap related controls with FieldGroup and use FieldSet plus FieldLegend for semantic grouping.

Examples

Input

<FieldSet>
    <FieldGroup>
        <Field>
            <FieldLabel For="username">Username</FieldLabel>
            <Input id="username" Placeholder="Max Leiter" />
            <FieldDescription>Choose a unique username for your account.</FieldDescription>
        </Field>
        <Field>
            <FieldLabel For="password">Password</FieldLabel>
            <FieldDescription>Must be at least 8 characters long.</FieldDescription>
            <Input id="password" Type="password" Placeholder="••••••••" />
        </Field>
    </FieldGroup>
</FieldSet>

Textarea

<FieldSet>
    <FieldGroup>
        <Field>
            <FieldLabel For="feedback">Feedback</FieldLabel>
            <Textarea id="feedback" Placeholder="Your feedback helps us improve..." rows="4" />
            <FieldDescription>Share your thoughts about our service.</FieldDescription>
        </Field>
    </FieldGroup>
</FieldSet>

Select

<Field>
    <FieldLabel For="department">Department</FieldLabel>
    <Select Class="w-full">
        <SelectTrigger Id="department" Class="w-full">
            <SelectValue Placeholder="Choose department" />
        </SelectTrigger>
        <SelectContent>
            <SelectItem Value="engineering">Engineering</SelectItem>
            <SelectItem Value="design">Design</SelectItem>
            <SelectItem Value="marketing">Marketing</SelectItem>
        </SelectContent>
    </Select>
    <FieldDescription>Select your department or area of work.</FieldDescription>
</Field>

Slider

<Field>
    <FieldTitle>Price Range</FieldTitle>
    <FieldDescription>Set your budget range.</FieldDescription>
    <Slider Value="@_priceRange"
            ValueChanged="OnPriceRangeChanged"
            Min="0"
            Max="1000"
            Step="10"
            Class="mt-2 w-full"
            aria-label="Price Range" />
</Field>

Fieldset

Address Information

We need your address to deliver your order.

<FieldSet>
    <FieldLegend>Address Information</FieldLegend>
    <FieldDescription>We need your address to deliver your order.</FieldDescription>
    <FieldGroup>
        <Field>
            <FieldLabel For="street">Street Address</FieldLabel>
            <Input id="street" Placeholder="123 Main St" />
        </Field>
        <div class="grid grid-cols-2 gap-4">
            <Field>
                <FieldLabel For="city">City</FieldLabel>
                <Input id="city" Placeholder="New York" />
            </Field>
            <Field>
                <FieldLabel For="zip">Postal Code</FieldLabel>
                <Input id="zip" Placeholder="90502" />
            </Field>
        </div>
    </FieldGroup>
</FieldSet>

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Sync Desktop & Documents folders

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

<FieldGroup>
    <FieldSet>
        <FieldLegend Variant="label">Show these items on the desktop</FieldLegend>
        <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>
        <FieldGroup Class="gap-3">
            <Field Orientation="horizontal">
                <Checkbox id="hard-disks" />
                <FieldLabel For="hard-disks" Class="font-normal">Hard disks</FieldLabel>
            </Field>
        </FieldGroup>
    </FieldSet>

    <FieldSeparator />

    <Field Orientation="horizontal">
        <Checkbox id="sync-folders" DefaultChecked="true" />
        <FieldContent>
            <FieldLabel For="sync-folders">Sync Desktop & Documents folders</FieldLabel>
            <FieldDescription>Your Desktop & Documents folders are being synced with iCloud Drive.</FieldDescription>
        </FieldContent>
    </Field>
</FieldGroup>

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

<FieldSet>
    <FieldLegend Variant="label">Subscription Plan</FieldLegend>
    <FieldDescription>Yearly and lifetime plans offer significant savings.</FieldDescription>
    <RadioGroup DefaultValue="monthly">
        <Field Orientation="horizontal">
            <RadioGroupItem Value="monthly" Id="plan-monthly" />
            <FieldLabel For="plan-monthly" Class="font-normal">Monthly ($9.99/month)</FieldLabel>
        </Field>
        <Field Orientation="horizontal">
            <RadioGroupItem Value="yearly" Id="plan-yearly" />
            <FieldLabel For="plan-yearly" Class="font-normal">Yearly ($99.99/year)</FieldLabel>
        </Field>
        <Field Orientation="horizontal">
            <RadioGroupItem Value="lifetime" Id="plan-lifetime" />
            <FieldLabel For="plan-lifetime" Class="font-normal">Lifetime ($299.99)</FieldLabel>
        </Field>
    </RadioGroup>
</FieldSet>

Switch

Multi-factor authentication

Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.

<Field Orientation="horizontal">
    <FieldContent>
        <FieldLabel For="two-factor">Multi-factor authentication</FieldLabel>
        <FieldDescription>Enable multi-factor authentication with an email fallback.</FieldDescription>
    </FieldContent>
    <Switch id="two-factor" />
</Field>

Choice Card

Compute Environment

Select the compute environment for your cluster.

Kubernetes

Run GPU workloads on a K8s configured cluster.

Virtual Machine

Access a VM configured cluster to run GPU workloads.

<FieldSet>
    <FieldLegend Variant="label">Compute Environment</FieldLegend>
    <FieldDescription>Select the compute environment for your cluster.</FieldDescription>
    <RadioGroup DefaultValue="kubernetes">
        <FieldLabel For="kubernetes-choice">
            <Field Orientation="horizontal">
                <FieldContent>
                    <FieldTitle>Kubernetes</FieldTitle>
                    <FieldDescription>Run GPU workloads on a K8s configured cluster.</FieldDescription>
                </FieldContent>
                <RadioGroupItem Value="kubernetes" Id="kubernetes-choice" />
            </Field>
        </FieldLabel>
        <FieldLabel For="vm-choice">
            <Field Orientation="horizontal">
                <FieldContent>
                    <FieldTitle>Virtual Machine</FieldTitle>
                    <FieldDescription>Access a VM configured cluster to run GPU workloads.</FieldDescription>
                </FieldContent>
                <RadioGroupItem Value="vm" Id="vm-choice" />
            </Field>
        </FieldLabel>
    </RadioGroup>
</FieldSet>

Field Group

Responses

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Push notifications

Tasks

Get notified when tasks you've created have updates. Manage tasks

Push notifications

Email notifications

<FieldGroup>
    <FieldSet>
        <FieldLegend Variant="label">Responses</FieldLegend>
        <FieldDescription>Get notified when ChatGPT responds to requests that take time.</FieldDescription>
        <FieldGroup data-slot="checkbox-group">
            <Field Orientation="horizontal">
                <Checkbox id="push-responses" DefaultChecked="true" Disabled="true" />
                <FieldLabel For="push-responses" Class="font-normal">Push notifications</FieldLabel>
            </Field>
        </FieldGroup>
    </FieldSet>

    <FieldSeparator />

    <FieldSet>
        <FieldLegend Variant="label">Tasks</FieldLegend>
        <FieldDescription>
            Get notified when tasks you've created have updates. <a href="#">Manage tasks</a>
        </FieldDescription>
        <FieldGroup data-slot="checkbox-group">
            <Field Orientation="horizontal">
                <Checkbox id="push-tasks" />
                <FieldLabel For="push-tasks" Class="font-normal">Push notifications</FieldLabel>
            </Field>
            <Field Orientation="horizontal">
                <Checkbox id="email-tasks" />
                <FieldLabel For="email-tasks" Class="font-normal">Email notifications</FieldLabel>
            </Field>
        </FieldGroup>
    </FieldSet>
</FieldGroup>

Responsive Layout

Profile

Fill in your profile information.

<FieldSet>
    <FieldLegend>Profile</FieldLegend>
    <FieldDescription>Fill in your profile information.</FieldDescription>
    <FieldSeparator />
    <FieldGroup>
        <Field Orientation="responsive">
            <FieldContent>
                <FieldLabel For="name">Name</FieldLabel>
                <FieldDescription>Provide your full name for identification.</FieldDescription>
            </FieldContent>
            <Input id="name" Placeholder="Evil Rabbit" required />
        </Field>
        <FieldSeparator />
        <Field Orientation="responsive">
            <FieldContent>
                <FieldLabel For="message">Message</FieldLabel>
                <FieldDescription>You can write your message here. Keep it short.</FieldDescription>
            </FieldContent>
            <Textarea id="message" Placeholder="Hello, world!" Class="min-h-[100px] resize-none sm:min-w-[300px]" required />
        </Field>
    </FieldGroup>
</FieldSet>

Validation and Errors

Add data-invalid="true" to the field and aria-invalid="true" to the control to switch the entire block into an error state.

Invalid

<Field data-invalid="true">
    <FieldLabel For="email">Email</FieldLabel>
    <Input id="email" Type="email" Placeholder="name@company.com" aria-invalid="true" />
    <FieldDescription>Use your company email address.</FieldDescription>
    <FieldError Errors="@_invalidEmailErrors" />
</Field>

Accessibility

FieldSet and FieldLegend keep related controls grouped for assistive technologies.

Field renders role="group" so nested labels and descriptions stay associated.

Render FieldError after the control to expose validation feedback with role="alert".

API Reference

FieldSet

Prop	Type	Default
Class	`string?`	null

FieldLegend

Prop	Type	Default
Variant	`"legend" \| "label"`	"legend"
Class	`string?`	null

FieldGroup

Prop	Type	Default
Class	`string?`	null

Field

Prop	Type	Default
Orientation	`"vertical" \| "horizontal" \| "responsive"`	"vertical"
Class	`string?`	null

FieldContent

Prop	Type	Default
Class	`string?`	null

FieldLabel

Prop	Type	Default
For	`string?`	null
Class	`string?`	null

FieldTitle

Prop	Type	Default
Class	`string?`	null

FieldDescription

Prop	Type	Default
Class	`string?`	null

FieldSeparator

Prop	Type	Default
Class	`string?`	null

FieldError

Prop	Type	Default
Errors	`IEnumerable<string?>?`	null
Class	`string?`	null

On This Page

Installation Usage Anatomy Examples Input Textarea Select Slider Fieldset Checkbox Radio Switch Choice Card Field Group Responsive Layout Validation and Errors Accessibility API Reference