Sha256: 0832a374178519e81ca364712bc980fe30e74f544a3941dbfe6350beed97bbef
Contents?: true
Size: 1.73 KB
Versions: 13
Compression:
Stored size: 1.73 KB
Contents
name: "Search"
description: "Search box"
body: |
A search box with label and attached submit button. The component must be used within an HTML form.
The search input has a name="q" attribute and a customisable ID and NAME.
It can be used on white or on govuk-blue using the on_govuk_blue option.
Markup such as heading tags can be included in the label using the label_text option. Styling is not included in the component for heading tags in labels, however this is what the search results page does.
accessibility_criteria: |
The search box should:
- be used inside a form with the role of 'search', to indicate it as a [search landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_search)
- have a clear label to identify the search functionality, which is visible to all users
examples:
default:
data: {}
apply_custom_styling_to_the_label_and_set_search_value:
data:
inline_label: false
label_text: "<h1>Search GOV.UK</h1>"
value: "driving licence"
stop_the_label_appearing_inline:
data:
inline_label: false
for_use_on_govuk_blue_background:
data:
on_govuk_blue: true
context:
dark_background: true
change_label_text:
data:
label_text: "Search"
set_id_for_search_input:
data:
id: "my_unique_id"
large_version:
data:
size: "large"
change_field_name:
description: To be used if you need to change the default name 'q'
data:
name: "my_own_fieldname"
remove_search_submit_button:
description: Sometimes this component may be used inside an existing form which has another submit button. A form should only have one submit button. The search button will be displayed by default.
data:
show_search_button: false
Version data entries
13 entries across 13 versions & 1 rubygems