Input

<dui-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.

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

Model binding

The dui-input Tag Helper has full support for ASP.NET Core model binding using the asp-for attribute. When using model binding, DuneUI will automatically wrap 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.

<dui-input asp-for="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; }
}

Model binding validation

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

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

public class ValidationModel
{
    [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)]
    [Required(ErrorMessage = "Enter your email address")]
    public string? Email { get; set; }
}

With Field

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

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

Implicit Field

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

<dui-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 dui-field-error Tag Helper (when using explicit fields) or the error attribute (when using implicit fields).

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

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

Input Types

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

<dui-input label="Text" type="text"/>
<dui-input label="Password" type="password" placeholder="Password"/>
<dui-input label="Tel" type="tel" placeholder="+66 (12) 345 6789"/>
<dui-input label="Url" type="url" placeholder="https://wwww.duneui.com"/>
<dui-input label="Search" type="search" placeholder="Enter a search term..."/>
<dui-input label="Number" type="number" placeholder="123"/>
<dui-input label="Date" type="date"/>
<dui-input label="Time" type="time"/>
<dui-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.

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

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

    public IFormFile? File { get; set; }

    [Display(Prompt = "123")]
    public int? Number { get; set; }

    [DataType(DataType.Password)]
    [Display(Prompt = "Password")]
    public string? Password { get; set; }

    [Display(Prompt = "Enter a search term...")]
    public string? Search { get; set; }

    [DataType(DataType.PhoneNumber)]
    [Display(Prompt = "+66 (12) 345 6789")]
    public string? Tel { get; set; }

    public string? Text { get; set; }

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

    [DataType(DataType.Url)]
    [Display(Prompt = "https://wwww.duneui.com")]
    public string? Url { get; set; }
}

Input

On this page