Design and content
This component can be used at 2 different heights:
The colour of the button can also be changed to a primary button if the search action is key to the user journey.
Ensure the hidden text on the form label and button is used as this is read out to screen reader users.
The placeholder text should say ‘Search’. You can change this but make sure that the text is not cut off on smaller screen sizes.
The width of the search component is set by using our layout classes. The search will stretch to fit its container. Make sure it is not:
- too wide as a user who zooms their screen might not be able to find the search button
- too small as a user may struggle to fill in their search query