Input

Displays a form input field.

<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/>

All the same rules as the built-in Tag Helper applies for things like data binding and resolving input types from data annotation attributes. You can also use any of the standard input attributes and they will flow through correctly to the underlying <input> element.

Examples

With Field

Use the Input Tag Helper with the Field Tag Helper to create form input fields with labels and descriptions.

<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 let StellarAdmin create an implicit field for an input.

<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"/>

An implicit field will the created when you do either of the following:

1. Add the label, description, or error attributes.
2. Use data binding by specifying the asp-for attribute (see example below).

Even if either of the above is true, an implicit field will not be created under the following conditions:

1. The input is explicitly wrapped inside a Field Tag Helper
2. You opted out by setting the render-field attribute on the Input Tag Helper to false.

Data binding

Bind the input to your model using the asp-for attribute. StellarAdmin will bind the value, set the id and name attributes, and display any validation errors.

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

public class DataBindingModel
{
    [Display(
        Name = "Email address",
        Description = "The email address where you want to receive your booking confirmation",
        Prompt = "e.g. ibn.battuta@rihlah.travel"
    )]
    [DataType(DataType.EmailAddress)]
    public string? Email { get; set; }
}

When using data binding, StellarAdmin will automatically wrap the input inside a Field Tag Helper and use data annotations for the label, description, placeholder, and validation messages. If you want to opt out of this behaviour, you can set the render-field attribute to false.

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"/>
<sa-input label="Date" type="date"/>
<sa-input label="Checkbox" type="checkbox"/>
<sa-input label="Radio" type="radio"/>

Infer Input Types via Data Binding

When you use data 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="Model.Text"/>
<sa-input asp-for="Model.Password"/>
<sa-input asp-for="Model.Date"/>
<sa-input asp-for="Model.Checkbox"/>
<sa-input asp-for="Model.Radio" type="radio" value="one"/>

public class InputTypeDataBindingModel
{
    public bool Checkbox { get; set; }

    [DataType(DataType.Date)]
    public DateTime? Date { get; set; }

    [DataType(DataType.Password)]
    public string? Password { get; set; }

    public string? Radio { get; set; }

    public string? Text { get; set; }
}