Skip to main contentComponents
Input
Internal
A component to allow users to enter a small, single piece of data.
Props
Stories
Standard
A standard Input.
Fixed width
An Input with fixed width.
Prefix and suffix
An Input with a prefix and a suffix.
E-mail
Password
Number
Colour
Unofficial
Date
Unofficial
Datetime local
Unofficial
Time
Unofficial
File
Unofficial
Month
Unofficial
Week
Unofficial
Range
Unofficial
Search
Tel
URL
Checkbox
Unofficial
Radio
Unofficial
<input class="govuk-input" type="text" name="foo" />
<input class="govuk-input" type="text" name="foo" />
<input
class="govuk-input"
style="max-width:5.38ex"
type="text"
name="foo"
/>
<Input name="foo" width="2" />
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">
£
</div>
<input class="govuk-input" type="text" name="foo" />
<div class="govuk-input__suffix" aria-hidden="true">
per item
</div>
</div>
<Input name="foo" prefix="£" suffix="per item" />
<input
class="govuk-input"
type="email"
name="example"
/>
<Input name="example" type="email" />
<input
class="govuk-input"
type="password"
name="example"
/>
<Input name="example" type="password" />
<input
class="govuk-input"
type="number"
name="example"
/>
<Input name="example" type="number" />
<input
class="govuk-input"
type="color"
name="example"
/>
<Input name="example" type="color" />
<input
class="govuk-input"
type="date"
name="example"
/>
<Input name="example" type="date" />
<input
class="govuk-input"
type="datetime-local"
name="example"
/>
<Input name="example" type="datetime-local" />
<input
class="govuk-input"
type="time"
name="example"
/>
<Input name="example" type="time" />
<input
class="govuk-input"
type="file"
name="example"
/>
<Input name="example" type="file" />
<input
class="govuk-input"
type="month"
name="example"
/>
<Input name="example" type="month" />
<input
class="govuk-input"
type="week"
name="example"
/>
<Input name="example" type="week" />
<input
class="govuk-input"
type="range"
name="example"
/>
<Input name="example" type="range" />
<input
class="govuk-input"
type="search"
name="example"
/>
<Input name="example" type="search" />
<input
class="govuk-input"
type="tel"
name="example"
/>
<Input name="example" type="tel" />
<input
class="govuk-input"
type="url"
name="example"
/>
<Input name="example" type="url" />
<input
class="govuk-input"
type="checkbox"
name="example"
/>
<Input name="example" type="checkbox" />
<input
class="govuk-input"
type="radio"
name="example"
/>
<Input name="example" type="radio" />