Text input for

Read more about the text input component on the Gov.UK Design System website

Open this example in a new tab

Model TextInputForExampleDefaultViewModel.cs

using GovUkDesignSystemDotNet;

public class TextInputForExampleDefaultViewModel
{
    [GovUkValidateRequired(ErrorMessageIfMissing = "Please enter your first name")]
    public string FirstName { get; set; }
    
    [GovUkValidateRequired(ErrorMessageIfMissing = "Please enter your last name")]
    public string LastName { get; set; }
}

View TextInputForExampleDefault.cshtml

@using GovUkDesignSystemDotNet
@model TextInputForExampleDefaultViewModel

<form method="post">
    @await Html.GovUkFieldset(new FieldsetViewModel
    {
        Legend = new FieldsetLegendViewModel
        {
            HtmlOrText = new HtmlOrText("Enter your name"),
            IsPageHeading = true,
            Classes = ["govuk-fieldset__legend--l"]
        },
        HtmlOrText = new HtmlOrText(
            @<text>
                @await Html.GovUkTextInputFor(
                    m => m.FirstName,
                    new TextInputViewModel
                    {
                        Label = new LabelViewModel
                        {
                            HtmlOrText = new HtmlOrText("First name")
                        }
                    })

                @await Html.GovUkTextInputFor(
                    m => m.LastName,
                    new TextInputViewModel
                    {
                        Label = new LabelViewModel
                        {
                            HtmlOrText = new HtmlOrText("Last name")
                        }
                    })
             </text>)
    })

    @await Html.GovUkButton(new ButtonViewModel
    {
        HtmlOrText = new HtmlOrText("Validate")
    })
</form>

Controller

public IActionResult MyActionName(TextInputForExampleDefaultViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        return View("TextInputForExampleDefault", viewModel);
    }

    // Do some work with the validated view-model
    return View("InteractiveExampleValidationSuccessful");
}