Components

Input

Internal

A component to allow users to enter a small, single piece of data.

HTML
React

<input class="govuk-input" type="text" name="foo" />

<Input name="foo" />

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
suffix	string	-	Suffix to show after the field

Stories

Standard

A standard Input.

HTML
React

<input class="govuk-input" type="text" name="foo" />

<Input name="foo" />

Fixed width

An Input with fixed width.

HTML
React

<input
  class="govuk-input"
  style="max-width:5.38ex"
  type="text"
  name="foo"
/>

<Input name="foo" width="2" />

Prefix and suffix

An Input with a prefix and a suffix.

HTML
React

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

Password

HTML
React

<input
  class="govuk-input"
  type="password"
  name="example"
/>

<Input name="example" type="password" />

Number

HTML
React

<input
  class="govuk-input"
  type="number"
  name="example"
/>

<Input name="example" type="number" />

Colour

Unofficial

HTML
React

<input
  class="govuk-input"
  type="color"
  name="example"
/>

<Input name="example" type="color" />

Date

Unofficial

HTML
React

<input
  class="govuk-input"
  type="date"
  name="example"
/>

<Input name="example" type="date" />

Datetime local

Unofficial

HTML
React

<input
  class="govuk-input"
  type="datetime-local"
  name="example"
/>

<Input name="example" type="datetime-local" />

Time

Unofficial

HTML
React

<input
  class="govuk-input"
  type="time"
  name="example"
/>

<Input name="example" type="time" />

File

Unofficial

HTML
React

<input
  class="govuk-input"
  type="file"
  name="example"
/>

<Input name="example" type="file" />

Month

Unofficial

HTML
React

<input
  class="govuk-input"
  type="month"
  name="example"
/>

<Input name="example" type="month" />

Week

Unofficial

HTML
React

<input
  class="govuk-input"
  type="week"
  name="example"
/>

<Input name="example" type="week" />

Range

Unofficial

HTML
React

<input
  class="govuk-input"
  type="range"
  name="example"
/>

<Input name="example" type="range" />

Search

HTML
React

<input
  class="govuk-input"
  type="search"
  name="example"
/>

<Input name="example" type="search" />

Tel

HTML
React

<input
  class="govuk-input"
  type="tel"
  name="example"
/>

<Input name="example" type="tel" />

URL

HTML
React

<input
  class="govuk-input"
  type="url"
  name="example"
/>

<Input name="example" type="url" />

Checkbox

Unofficial

HTML
React

<input
  class="govuk-input"
  type="checkbox"
  name="example"
/>

<Input name="example" type="checkbox" />

Radio

Unofficial

HTML
React

<input
  class="govuk-input"
  type="radio"
  name="example"
/>

<Input name="example" type="radio" />