Skip to main contentComponents
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.)
Props
Stories
Standard
A standard Standalone input.
Hint
If you provide a hint, it will be displayed instead of the label.
Custom submit button text
The text of the submit button is visually hidden, but can be customised for screen-readers.
Fixed width
Fluid width
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.
Disabled
<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"
/>
<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" />
<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"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>