Components

Standalone input

Unofficial Experimental

A single-line, form field with a submit button.

(Created to support the Search box component but may have other uses.)

HTML
React

<div
  id="message"
  class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input"
>
  <label
    for="message-input"
    class="govuk-label govuk-label--hidden"
    aria-hidden="true"
  >
    Your message
  </label>
  <input
    id="message-input"
    placeholder="Your message"
    class="govuk-input not-govuk-standalone-input__input"
    type="text"
    name="message"
  />
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button not-govuk-standalone-input__button"
  >
    Send
  </button>
</div>

<StandaloneInput
  button="Send"
  label="Your message"
  name="message"
/>

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
button	ReactNode	Submit	Submit button text
error	ReactNode	-	Error message
hint	string	-	Hint
label	string	-	Label

Stories

Standard

A standard Standalone input.

HTML
React

<div
  id="message"
  class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input"
>
  <label
    for="message-input"
    class="govuk-label govuk-label--hidden"
    aria-hidden="true"
  >
    Message
  </label>
  <input
    id="message-input"
    placeholder="Message"
    class="govuk-input not-govuk-standalone-input__input"
    type="text"
    name="message"
  />
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button not-govuk-standalone-input__button"
  >
    Submit
  </button>
</div>

<StandaloneInput label="Message" name="message" />

Hint

If you provide a hint, it will be displayed instead of the label.

HTML
React

<div
  id="message"
  class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input"
>
  <label
    for="message-input"
    class="govuk-label govuk-label--hidden"
    aria-hidden="true"
  >
    Message
  </label>
  <div
    id="message-hint"
    class="govuk-hint govuk-hint--hidden"
    aria-hidden="true"
  >
    What do you want to say?
  </div>
  <input
    aria-describedby="message-hint"
    id="message-input"
    placeholder="What do you want to say?"
    class="govuk-input not-govuk-standalone-input__input"
    type="text"
    name="message"
  />
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button not-govuk-standalone-input__button"
  >
    Submit
  </button>
</div>

<StandaloneInput
  hint="What do you want to say?"
  label="Message"
  name="message"
/>

Custom submit button text

The text of the submit button is visually hidden, but can be customised for screen-readers.

HTML
React

<div
  id="message"
  class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input"
>
  <label
    for="message-input"
    class="govuk-label govuk-label--hidden"
    aria-hidden="true"
  >
    Message
  </label>
  <input
    id="message-input"
    placeholder="Message"
    class="govuk-input not-govuk-standalone-input__input"
    type="text"
    name="message"
  />
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button not-govuk-standalone-input__button"
  >
    Send
  </button>
</div>

<StandaloneInput
  button="Send"
  label="Message"
  name="message"
/>

<div
  id="message"
  class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-standalone-input--fixed-width"
>
  <label
    for="message-input"
    class="govuk-label govuk-label--hidden"
    aria-hidden="true"
  >
    Message
  </label>
  <input
    id="message-input"
    placeholder="Message"
    class="govuk-input govuk-input--fixed-width not-govuk-standalone-input__input"
    style="max-width:22.86ex"
    type="text"
    name="message"
  />
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button not-govuk-standalone-input__button"
  >
    Submit
  </button>
</div>

<StandaloneInput
  label="Message"
  name="message"
  width="10"
/>

Fluid width

HTML
React

<div
  id="message"
  class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input govuk-!-width-one-half"
>
  <label
    for="message-input"
    class="govuk-label govuk-label--hidden"
    aria-hidden="true"
  >
    Message
  </label>
  <input
    id="message-input"
    placeholder="Message"
    class="govuk-input not-govuk-standalone-input__input"
    type="text"
    name="message"
  />
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button not-govuk-standalone-input__button"
  >
    Submit
  </button>
</div>

<StandaloneInput
  className="govuk-!-width-one-half"
  label="Message"
  name="message"
/>

Error

Currently errors are visually hidden, so it is best to avoid them. They will however be accessible to screen-readers, and the field will still be highlighted in red.

HTML
React

<div
  id="message"
  class="govuk-form-group govuk-form-group--error govuk-form-group--standalone not-govuk-standalone-input not-govuk-standalone-input--error"
>
  <label
    for="message-input"
    class="govuk-label govuk-label--hidden"
    aria-hidden="true"
  >
    Message
  </label>
  <p
    id="message-error"
    class="govuk-error-message govuk-error-message--hidden"
    aria-hidden="true"
  >
    <span class="govuk-visually-hidden">Error:</span>
    Something went wrong
  </p>
  <input
    aria-describedby="message-error"
    id="message-input"
    placeholder="Message"
    class="govuk-input govuk-input--error not-govuk-standalone-input__input"
    type="text"
    name="message"
  />
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button not-govuk-standalone-input__button"
  >
    Submit
  </button>
</div>

<StandaloneInput
  error="Something went wrong"
  label="Message"
  name="message"
/>

Disabled

HTML
React

<div
  id="message"
  class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input"
>
  <label
    for="message-input"
    class="govuk-label govuk-label--hidden"
    aria-hidden="true"
  >
    Message
  </label>
  <input
    disabled=""
    id="message-input"
    placeholder="Message"
    class="govuk-input not-govuk-standalone-input__input"
    type="text"
    name="message"
  />
  <button
    aria-disabled="true"
    data-module="govuk-button"
    disabled=""
    type="submit"
    class="govuk-button not-govuk-standalone-input__button"
  >
    Submit
  </button>
</div>

<StandaloneInput
  disabled
  label="Message"
  name="message"
/>