Text input

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

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkTextInput(new TextInputViewModel
{
    Name = "event-name",
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("What is the name of the event?"),
        IsPageHeading = true,
        Classes = ["govuk-label--l"]
    }
})

Options

Options for TextInputViewModel

Name	Type	Description
Id	string	The ID of the input. Defaults to the value of Name.
Name	string	Required. The name of the input, which is submitted with the form data.
Type	string	Type of input control to render, for example, a password input control. Defaults to "text".
InputMode	string	Optional value for the inputmode attribute.
Value	string	Optional initial value of the input.
Disabled	bool	If true, input will be disabled.
DescribedBy	List<string>	One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
Label	LabelViewModel	Required. The label used by the text input component. See options for LabelViewModel
Hint	HintViewModel	Can be used to add a hint to a text input component. See options for HintViewModel
ErrorMessage	ErrorMessageViewModel	Can be used to add an error message to the text input component. The error message component will not display if ErrorMessage is null. See options for ErrorMessageViewModel
Prefix	TextInputPrefixSuffixViewModel	Can be used to add a prefix to the text input component. See options for TextInputPrefixSuffixViewModel
Suffix	TextInputPrefixSuffixViewModel	Can be used to add a suffix to the text input component. See options for TextInputPrefixSuffixViewModel
FormGroup	FormGroupViewModel	Additional options for the form group containing the text input component. See options for FormGroupViewModel
Classes	List<string>	Classes to add to the input.
Autocomplete	string	Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard section in the HTML standard for full list of attributes that can be used.
Pattern	string	Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
Spellcheck	bool?	Optional field to enable or disable the spellcheck attribute on the input.
Autocapitalize	string	Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML spec for a full list of values that can be used.
InputWrapper	TextInputWrapperViewModel	If any of Prefix, Suffix, FormGroup.BeforeInput or FormGroup.AfterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See options for TextInputWrapperViewModel
Attributes	Dictionary<string, string>	HTML attributes (for example, data attributes) to add to the input.

Options for TextInputPrefixSuffixViewModel

Name	Type	Description
HtmlOrText	HtmlOrText	Required. HTML or text to use within the prefix/suffix.
Classes	List<string>	Classes to add to the prefix/suffix.
Attributes	Dictionary<string, string>	HTML attributes (for example, data attributes) to add to the prefix/suffix element.

Options for FormGroupViewModel

Name	Type	Description
Classes	List<string>	Classes to add to the form group (for example to show error state for the whole group).
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the form group.
BeforeInput	HtmlOrText	HTML or text to add before the input used by the text input component.
AfterInput	HtmlOrText	HTML or text to add after the input used by the text input component

Options for TextInputWrapperViewModel

Name	Type	Description
Classes	List<string>	Classes to add to the wrapping element.
Attributes	Dictionary<string, string>	HTML attributes (for example, data attributes) to add to the wrapping element.

Examples

Using hints

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkTextInput(new TextInputViewModel
{
    Name = "account-number",
    Classes = ["govuk-input--width-10"],
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("What is your account number?"),
        IsPageHeading = true,
        Classes = ["govuk-label--l"]
    },
    Hint = new HintViewModel
    {
        HtmlOrText = new HtmlOrText("Must be between 6 and 8 digits long")
    }
})

Prefixes and suffixes

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkTextInput(new TextInputViewModel
{
    Name = "cost-per-item",
    Classes = ["govuk-input--width-5"],
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("What is the cost per item, in pounds?"),
        IsPageHeading = true,
        Classes = ["govuk-label--l"]
    },
    Prefix = new TextInputPrefixViewModel
    {
        HtmlOrText = new HtmlOrText("£")
    },
    Suffix = new TextInputSuffixViewModel
    {
        HtmlOrText = new HtmlOrText("per item")
    }
})

Error messages

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkTextInput(new TextInputViewModel
{
    Name = "event-name",
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("What is the name of the event?"),
        IsPageHeading = true,
        Classes = ["govuk-label--l"]
    },
    Hint = new HintViewModel
    {
        HtmlOrText = new HtmlOrText("The name you’ll use on promotional material")
    },
    ErrorMessage = new ErrorMessageViewModel
    {
        HtmlOrText = new HtmlOrText("Enter an event name")
    }
})