Skip to main contentComponents
Search box
Unofficial Experimental
A single-line, form field for searching, with submit button.
(Heavily inspired by the Search component in the GOV.UK Component Guide.)
Props
Stories
Standard
A standard Search box.
Custom label
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
<SearchBox disabled name="q" />
Secondary button
A search box with a more subtle, grey button, similar to the 'secondary' button style.
<form
action="https://www.google.co.uk/search"
method="get"
>
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-standalone-input--fixed-width not-govuk-search-box"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search Google
</label>
<input
id="q-input"
placeholder="Search Google"
class="govuk-input govuk-input--fixed-width not-govuk-standalone-input__input"
style="max-width:31.910000000000004ex"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
</form>
<form
action="https://www.google.co.uk/search"
method="get"
>
<SearchBox
label="Search Google"
name="q"
width={15}
/>
</form>
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-search-box"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search
</label>
<input
id="q-input"
placeholder="Search"
class="govuk-input not-govuk-standalone-input__input"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-search-box"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Query
</label>
<input
id="q-input"
placeholder="Query"
class="govuk-input not-govuk-standalone-input__input"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<SearchBox label="Query" name="q" />
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-search-box"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search
</label>
<div
id="q-hint"
class="govuk-hint govuk-hint--hidden"
aria-hidden="true"
>
What are you looking for?
</div>
<input
aria-describedby="q-hint"
id="q-input"
placeholder="What are you looking for?"
class="govuk-input not-govuk-standalone-input__input"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<SearchBox
hint="What are you looking for?"
name="q"
/>
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-search-box"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search
</label>
<input
id="q-input"
placeholder="Search"
class="govuk-input not-govuk-standalone-input__input"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Query
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<SearchBox button="Query" name="q" />
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-standalone-input--fixed-width not-govuk-search-box"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search
</label>
<input
id="q-input"
placeholder="Search"
class="govuk-input govuk-input--fixed-width not-govuk-standalone-input__input"
style="max-width:22.86ex"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<SearchBox name="q" width="10" />
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-search-box govuk-!-width-one-half"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search
</label>
<input
id="q-input"
placeholder="Search"
class="govuk-input not-govuk-standalone-input__input"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<SearchBox
className="govuk-!-width-one-half"
name="q"
/>
<div
id="q"
class="govuk-form-group govuk-form-group--error govuk-form-group--standalone not-govuk-standalone-input not-govuk-standalone-input--error not-govuk-search-box"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search
</label>
<p
id="q-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="q-error"
id="q-input"
placeholder="Search"
class="govuk-input govuk-input--error not-govuk-standalone-input__input"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<SearchBox error="Something went wrong" name="q" />
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-search-box"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search
</label>
<input
disabled=""
id="q-input"
placeholder="Search"
class="govuk-input not-govuk-standalone-input__input"
type="text"
name="q"
/>
<button
aria-disabled="true"
data-module="govuk-button"
disabled=""
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<div
id="q"
class="govuk-form-group govuk-form-group--standalone not-govuk-standalone-input not-govuk-search-box not-govuk-search-box--secondary"
>
<label
for="q-input"
class="govuk-label govuk-label--hidden"
aria-hidden="true"
>
Search
</label>
<input
id="q-input"
placeholder="Search"
class="govuk-input not-govuk-standalone-input__input"
type="text"
name="q"
/>
<button
data-module="govuk-button"
type="submit"
class="govuk-button not-govuk-standalone-input__button"
>
Search
<svg
class="not-govuk-search-box__icon"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<circle
cx="12.0161"
cy="11.0161"
r="8.51613"
stroke="currentColor"
stroke-width="3"
></circle>
<line
x1="17.8668"
y1="17.3587"
x2="26.4475"
y2="25.9393"
stroke="currentColor"
stroke-width="3"
></line>
</svg>
</button>
</div>
<SearchBox classModifiers="secondary" name="q" />