A text input component for forms and user data entry with built-in styling and accessibility features.
Keep your API key secure and never share it publicly.
<div class="grid w-full max-w-sm items-center gap-3">
<Label For="api-key">API Key</Label>
<Input id="api-key" Type="password" Placeholder="sk-4f9f2b5a6c8d1e3f" />
<p class="text-muted-foreground text-sm">Keep your API key secure and never share it publicly.</p>
</div>Installation
Install the input component using the command or manual steps.
blazor-shadcn add inputUsage
@using BlazorShadcn.Components.UI<Input />Examples
Basic
<div class="w-full max-w-xs">
<Input Type="text" Placeholder="Enter text" />
</div>FieldComing soon
Coming Soon
Field GroupComing soon
Coming Soon
Disabled
This field is currently disabled.
<div class="grid w-full max-w-sm items-center gap-3">
<Label For="email-disabled">Email</Label>
<Input id="email-disabled" Placeholder="Email" Disabled="true" />
<p class="text-muted-foreground text-sm">This field is currently disabled.</p>
</div>Invalid
Please enter a valid email address.
<div class="grid w-full max-w-sm items-center gap-3">
<Label For="email-invalid">Email</Label>
<Input id="email-invalid" Type="email" Placeholder="Email" aria-invalid="true" />
<p class="text-destructive text-sm">Please enter a valid email address.</p>
</div>File
Select a picture to upload.
<div class="grid w-full max-w-sm items-center gap-3">
<Label For="picture">Picture</Label>
<Input id="picture" Type="file" />
<p class="text-muted-foreground text-sm">Select a picture to upload.</p>
</div>Inline
<div class="flex w-full max-w-sm items-center gap-2">
<Label For="search" Class="sr-only">Search</Label>
<Input id="search" Type="text" Placeholder="Search..." />
<Button Variant="ButtonVariant.Outline" Type="submit">Search</Button>
</div>Grid
<div class="grid w-full max-w-sm grid-cols-2 gap-2">
<div class="grid gap-2">
<Label For="first-name">First Name</Label>
<Input id="first-name" Placeholder="John" />
</div>
<div class="grid gap-2">
<Label For="last-name">Last Name</Label>
<Input id="last-name" Placeholder="Doe" />
</div>
</div>Required
This field must be filled in before submitting.
<div class="grid w-full max-w-sm items-center gap-3">
<Label For="required-field">Required Field <span aria-hidden="true" class="text-destructive">*</span></Label>
<Input id="required-field" Type="text" Placeholder="This field is required" required />
<p class="text-muted-foreground text-sm">This field must be filled in before submitting.</p>
</div>Badge
Beta
<div class="grid w-full max-w-sm items-center gap-3">
<div class="flex items-center gap-2">
<Label For="webhook-url">Webhook URL</Label>
<Badge Variant="BadgeVariant.Secondary">Beta</Badge>
</div>
<Input id="webhook-url" Type="url" Placeholder="https://api.example.com/webhook" />
</div>Input Group
Fallback example until the dedicated Input Group component page is implemented.
https://
<div class="flex w-full max-w-sm items-center rounded-md border border-input bg-background px-3">
<span class="text-muted-foreground text-sm">https://</span>
<Input Class="border-0 bg-transparent shadow-none focus-visible:ring-0 focus-visible:border-transparent" Placeholder="example.com" />
</div>Button GroupComing soon
Coming Soon
FormComing soon
Coming Soon