A shadcn/ui inspired Blazor component library

Installation

Add the Input component using the CLI:

shadcnblazor component add input

Usage

The Input component provides a single-line text input. Use Value and ValueChanged for two-way binding. Set Placeholder, Type, and Size as needed.

1

2

3

4

5

<Input @bind-Value="_email" Placeholder="Email" Type="email" />

@code {
    private string _email = "";
}

Examples

Sizes

Use the Size parameter for Sm, Md, or Lg inputs.

1

2

3

4

5

<div class="flex flex-col gap-3">
    <Input Size="@Size.Sm" Placeholder="Small" />
    <Input Size="@Size.Md" Placeholder="Medium (default)" />
    <Input Size="@Size.Lg" Placeholder="Large" />
</div>

Form validation (aria-invalid)

Wrap your form in FormValidationProvider with Invalid and ErrorMessageId. Input and Button receive the context and apply aria-invalid and aria-errormessage automatically.

Email

1

2

3

4

5

6

7

8

9

10

11

12

13

<FormValidationProvider Invalid="_showInvalid" ErrorMessageId="email-error">
    <div class="flex flex-col gap-2">
        <label for="email">Email</label>
        <Input id="email" @bind-Value="_email" Placeholder="you@example.com" />
        <span id="email-error" class="text-sm text-destructive" aria-live="polite">
            @(_showInvalid ? "Please enter a valid email address." : null)
        </span>
    </div>
    <div class="flex gap-2 mt-2">
        <Button Type="ButtonType.Submit" OnClick="HandleSubmit">Submit</Button>
        <Button Variant="Variant.Outline" OnClick="ToggleInvalid">Toggle invalid</Button>
    </div>
</FormValidationProvider>

API Reference

Input

Single-line text input with variant styling.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`Class`	`string`
`Disabled`	`bool`	Whether the input is disabled.
`OnChange`	`EventCallback<ChangeEventArgs>`	Callback invoked when the input change event fires.
`Placeholder`	`string`	Placeholder text when the value is empty.
`Size`	`Size`	The size of the input.
`Type`	`string`	The HTML input type (e.g., text, password, email).
`Value`	`string`	The current value of the input.
`ValueChanged`	`EventCallback<string>`	Callback invoked when the value changes.

Events

Name	Type	Description
`OnChange`	`EventCallback<ChangeEventArgs>`	Callback invoked when the input change event fires.
`ValueChanged`	`EventCallback<string>`	Callback invoked when the value changes.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.