Input

<sa-input placeholder="Enter your email address" type="email"/>

Usage

The Input Tag Helper generates an HTML Input Element and uses the built-in ASP.NET Core Input Tag Helper internally.

<sa-input/>

The same rules as for the built-in Tag Helper apply to things like model binding and resolving input types from data annotation attributes.

Examples

Model binding

<sa-input> has full support for ASP.NET Core model binding using the asp-for attribute. When using model binding, StellarAdmin will automatically wraps the input inside a Field with the correct label, description, and placeholder text derived from data attributes. You can opt out of this behavior by setting the render-field attribute to false.

<sa-input asp-for="Email"/>

Model binding validation

When using model binding, validation errors from Model state are displayed correctly.

<sa-input asp-for="Email"/>

With field

If you are not using model binding, you can use the various Field Tag Helpers to wrap your input inside a field.

<sa-field>
    <sa-label>Email address</sa-label>
    <sa-input placeholder="e.g. ibn.battuta@rihlah.travel" type="email"/>
    <sa-field-description>
        The email address where you want to receive your booking confirmation
    </sa-field-description>
</sa-field>

Implicit field

You can also implicitly wrap the input inside a Field using the shorthand syntax and setting the label and description attributes.

<sa-input label="Email address"
           description="The email address where you want to receive your booking confirmation" 
           placeholder="e.g. ibn.battuta@rihlah.travel"
           type="email"/>

Manual validation

If you're not using ASP.NET Core model binding, you can manually indicate validation errors by setting the aria-invalid attribute to true. This will display a red border around the input.

The error message can be displayed using either a <sa-field-error> Tag Helper (when using explicit fields) or the error attribute (when using implicit fields).

<sa-field>
    <sa-label>Email address</sa-label>
    <sa-input aria-invalid="true" placeholder="e.g. ibn.battuta@rihlah.travel" type="email"/>
    <sa-field-error>Enter your email address</sa-field-error>
    <sa-field-description>
        The email address where you want to receive your booking confirmation
    </sa-field-description>
</sa-field>

Input types

You can specify the input type explicitly using the type attribute.

<sa-input label="Text" type="text"/>
<sa-input label="Password" type="password" placeholder="Password"/>
<sa-input label="Tel" type="tel" placeholder="+66 (12) 345 6789"/>
<sa-input label="Url" type="url" placeholder="https://www.example.com"/>
<sa-input label="Search" type="search" placeholder="Enter a search term..."/>
<sa-input label="Number" type="number" placeholder="123"/>
<sa-input label="Date" type="date"/>
<sa-input label="Time" type="time"/>
<sa-input label="File" type="file"/>

Infer input types via model binding

When you use model binding, the input type will be inferred from the underlying data type and data annotations. For more information on this, refer to the built-in ASP.NET Core Input Tag Helper documentation.

<sa-input asp-for="Text"/>
<sa-input asp-for="Password"/>
<sa-input asp-for="Tel"/>
<sa-input asp-for="Url"/>
<sa-input asp-for="Search" type="search"/>
<sa-input asp-for="Number"/>
<sa-input asp-for="Date"/>
<sa-input asp-for="Time"/>
<sa-input asp-for="File"/>

Part classes

Pass an InputClassNames instance from the StellarAdmin.TagHelpers namespace to <sa-input> using class-names. Each property accepts an optional string of space-separated CSS classes, which are added to the part's existing classes.

@{
    var partClasses = new InputClassNames
    {
        Root = "travel-field",
        Label = "travel-label",
        Description = "travel-help",
        Control = "travel-input-control",
    };
}

<sa-input id="classes-destination" label="Destination" description="Where would you like to travel?" placeholder="Cape Town" class-names="@partClasses" />

Root, Label, Description, Error, and Content are inherited from FieldClassNames. They only style generated field elements; with render-field="false", apply class directly to any field elements you compose yourself. The control-specific parts still apply. See Field part classes for the shared behavior and a styled example.

API Reference

<sa-input>

Renders an <input> element. When asp-for is set, it delegates to the built-in ASP.NET Core Input Tag Helper to resolve the input type, value, and validation attributes.