Search box

Use a search box to let users complete keyword-based searches.

  • Content:
    @use 'sass:math';
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
    
    $ontario-input-height: globalFunctions.rem-calc(48);
    $ontario-search-icon-size: 2rem;
    $ontario-reset-icon-size: 1.5rem;
    $ontario-serach-button-width: 5rem;
    $ontario-serach-button-width-mobile: 4rem;
    $ontario-search-input-padding: 8.5rem;
    $ontario-search-input-padding--mobile: 6.4rem;
    $ontario-search-desktop-width: 34rem;
    $ontario-search-mobile-width: 20.5rem;
    $ontario-reset-icon-path: '../icons/ontario-icons-close.svg';
    
    .ontario-search__container {
    	max-width: $ontario-search-desktop-width;
    }
    
    .ontario-search__input-container {
    	position: relative;
    }
    
    .ontario-search__label {
    	margin-bottom: spacing.$spacing-2;
    }
    
    .ontario-search__input.ontario-input {
    	border: 2px solid colours.$ontario-colour-black;
    	margin-bottom: spacing.$spacing-0;
    	height: $ontario-input-height;
    	padding-left: spacing.$spacing-3;
    	padding-right: $ontario-search-input-padding;
    
    	&:invalid + input[type='reset'] {
    		display: none;
    	}
    
    	&:focus {
    		& ~ .ontario-header__search-submit {
    			background-color: colours.$ontario-colour-link;
    			color: colours.$ontario-colour-white;
    
    			&:hover {
    				background-color: colours.$ontario-colour-link--hover;
    				color: colours.$ontario-colour-white;
    			}
    		}
    	}
    
    	// Remove auto X icon for IE and Edge on input area
    	&::-ms-clear {
    		display: none;
    		width: 0;
    		height: 0;
    	}
    
    	// Remove red outline around input area on Firefox
    	&:invalid:focus {
    		box-shadow: 0 0 0 4px colours.$ontario-colour-focus;
    		-moz-box-shadow: none;
    	}
    
    	&:invalid:not(:focus) {
    		box-shadow: none;
    		-moz-box-shadow: none;
    	}
    
    	@media screen and (min-width: breakpoints.$small-breakpoint) and (max-width: breakpoints.$medium-breakpoint) {
    		padding-left: spacing.$spacing-4;
    		padding-right: $ontario-search-input-padding--mobile;
    	}
    }
    
    .ontario-search__submit {
    	border: 0;
    	border-radius: 0 3px 3px 0;
    	background-color: colours.$ontario-colour-link;
    	color: colours.$ontario-colour-black;
    
    	display: flex;
    	justify-content: center;
    	align-items: center;
    
    	font-family: typography.$ontario-font-open-sans;
    	font-weight: fontWeights.$ontario-font-weights-semi-bold;
    	font-size: 1.125rem;
    	width: $ontario-serach-button-width;
    	line-height: lineheight.$ontario-line-height-8;
    
    	position: absolute;
    	right: spacing.$spacing-0;
    	bottom: spacing.$spacing-0;
    	top: spacing.$spacing-0;
    	cursor: pointer;
    
    	&:hover {
    		background-color: colours.$ontario-colour-link--hover;
    		color: colours.$ontario-colour-white;
    	}
    
    	&:focus {
    		outline: none;
    		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
    		background-color: colours.$ontario-colour-link--hover;
    		color: colours.$ontario-colour-white;
    	}
    
    	&:active {
    		background-color: colours.$ontario-colour-link--active;
    		color: colours.$ontario-colour-white;
    	}
    
    	svg {
    		color: colours.$ontario-colour-white;
    		margin-right: spacing.$spacing-0;
    		margin-bottom: spacing.$spacing-0;
    		width: $ontario-search-icon-size;
    		height: $ontario-search-icon-size;
    	}
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		width: $ontario-serach-button-width-mobile;
    	}
    }
    
    input[type='reset'].ontario-search__reset {
    	position: absolute;
    	display: flex;
    	align-items: center;
    	top: spacing.$spacing-2;
    	right: $ontario-serach-button-width + spacing.$spacing-4;
    	height: $ontario-reset-icon-size;
    	width: $ontario-reset-icon-size;
    	color: colours.$ontario-colour-black;
    	margin: spacing.$spacing-0;
    	padding: spacing.$spacing-1;
    	background-size: $ontario-reset-icon-size;
    	background-image: url($ontario-reset-icon-path);
    	background-position: center center;
    	background-repeat: no-repeat;
    	background-color: transparent;
    	outline: none;
    	border: none;
    	cursor: pointer;
    
    	&:focus {
    		box-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
    	}
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		right: $ontario-serach-button-width-mobile + spacing.$spacing-4;
    	}
    }
    
    // remove default cancel button for input with type="search"
    input[type='search'].ontario-search__input::-webkit-search-decoration,
    input[type='search'].ontario-search__input::-webkit-search-cancel-button,
    input[type='search'].ontario-search__input::-webkit-search-results-button,
    input[type='search'].ontario-search__input::-webkit-search-results-decoration {
    	-webkit-appearance: none;
    }
    
  • URL: /components/raw/search-box/search.scss
  • Filesystem Path: fractal/components/components/search/search.scss
  • Size: 5.4 KB
  • Content:
    .ontario-search__container{max-width:34rem}.ontario-search__input-container{position:relative}.ontario-search__label{margin-bottom:.5rem}.ontario-search__input.ontario-input{border:2px solid #1a1a1a;margin-bottom:0;height:3rem;padding-left:.75rem;padding-right:8.5rem}.ontario-search__input.ontario-input:invalid+input[type=reset]{display:none}.ontario-search__input.ontario-input:focus~.ontario-header__search-submit{background-color:#06c;color:#fff}.ontario-search__input.ontario-input:focus~.ontario-header__search-submit:hover{background-color:#00478f;color:#fff}.ontario-search__input.ontario-input::-ms-clear{display:none;width:0;height:0}.ontario-search__input.ontario-input:invalid:focus{box-shadow:0 0 0 4px #009adb;-moz-box-shadow:none}.ontario-search__input.ontario-input:invalid:not(:focus){box-shadow:none;-moz-box-shadow:none}@media screen and (min-width: 40em)and (max-width: 73em){.ontario-search__input.ontario-input{padding-left:1rem;padding-right:6.4rem}}.ontario-search__submit{border:0;border-radius:0 3px 3px 0;background-color:#06c;color:#1a1a1a;display:flex;justify-content:center;align-items:center;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;font-size:1.125rem;width:5rem;line-height:1.56;position:absolute;right:0;bottom:0;top:0;cursor:pointer}.ontario-search__submit:hover{background-color:#00478f;color:#fff}.ontario-search__submit:focus{outline:none;box-shadow:0 0 0 4px #009adb;background-color:#00478f;color:#fff}.ontario-search__submit:active{background-color:#002142;color:#fff}.ontario-search__submit svg{color:#fff;margin-right:0;margin-bottom:0;width:2rem;height:2rem}@media screen and (max-width: 40em){.ontario-search__submit{width:4rem}}input[type=reset].ontario-search__reset{position:absolute;display:flex;align-items:center;top:.5rem;right:6rem;height:1.5rem;width:1.5rem;color:#1a1a1a;margin:0;padding:.25rem;background-size:1.5rem;background-image:url("../icons/ontario-icons-close.svg");background-position:center center;background-repeat:no-repeat;background-color:transparent;outline:none;border:none;cursor:pointer}input[type=reset].ontario-search__reset:focus{box-shadow:inset 0 0 0 4px #009adb}@media screen and (max-width: 40em){input[type=reset].ontario-search__reset{right:5rem}}input[type=search].ontario-search__input::-webkit-search-decoration,input[type=search].ontario-search__input::-webkit-search-cancel-button,input[type=search].ontario-search__input::-webkit-search-results-button,input[type=search].ontario-search__input::-webkit-search-results-decoration{-webkit-appearance:none}
  • URL: /components/raw/search-box/search.css
  • Filesystem Path: fractal/components/components/search/search.css
  • Size: 2.6 KB

Guiding principle: Give users control.

On this page


When to use this component

The search box design is one part of a larger search pattern. The search box component is specifically focused on giving users the ability to type in their query and use a search button.

Only use a search box if there’s enough data for users to warrant the search function. For example, if your website or application has:

  • a contained dataset that is not queried by the ontario.ca search
  • its own navigation structure where search may improve the user experience

Users typically look for the search box at the top of the page, either in the upper-right or left corner.

If you’re designing a search-specific page, place the search box on the left-hand side to make it easy to find.


If the user attempts to search without providing any text input, tell the user that they must enter a search query.


Allow users to fully input and submit their query in order to run the search function.

This design does not account for auto-complete predictive or type-ahead search at this time.


Component features

The search box includes:

  1. An adjustable header label (default set to H5 heading)
  2. An optional hint text label to help users understand the context of what they can search for
  3. A primary button with a magnifying glass icon as the search button
  4. Text-input field
  5. A clear button that appears once the user enters a character in the search field

Example


A diagram of the features that make up a search box

Search box responsive sizing

A research study by Nielsen Norman Group found that users’ average search query length is 2.0 words. With this in mind, and also to ensure that the search button is visible for users who magnify their screens, we recommend limiting the maximum width of the search box.

The default search field for the desktop display of a large 12-column (1120px) grid breakpoint will span 6 columns (544px). This sizing is intentionally set to reduce interaction friction and accommodate other search related components such as sort or filter elements beside the search box. In circumstances with minimal or no horizontally placed search related components, the alternative size of the search box can span 8 columns (736px). This ratio should also be used for tablets.

The search field will span the full 12 columns (328px) for mobile.

For desktop and tablet grid breakpoints, the width of the search button in the component is 80px. The button width for mobile components is 64px.

Example - desktop / tablet


An example of a search box designed for desktop with a search button width of 80px

Example - mobile


An example of a search box designed for mobile with a search button width of 64px

The character entry does not span the full length of the text field. This is to provide a reasonable touch-target area for the clear and search button actions.

Do this


An example of a search field that has a character entry field that stops before the clear button.

Don't do this


An example of a search field that has a character entry field that spans the full length of the text field and overlaps the clear button.

Implement a scrolling text input behaviour to follow the user’s input and keep the cursor in view even if it extends beyond the visible width of the text input box.


Best practices

Do

  • Program your search functionality to handle single-word and very short multi-word queries.
  • Keep the search design minimal. Use the appropriate text hierarchy and adequate white space to highlight the component.
  • Place the search box on a white background.
  • Use a hint text label to provide context.

Don’t

  • Search all ontario.ca content — keep it contained to your website or web application’s data.
  • Use placeholder text in the text input field.
  • Overload the search component with advanced functionality. Provide a simple search first, then show the user further sorting or filtering options if necessary.

Do this


An example of a search box that has a hint label above the search field

Don't do this


An example of a search box that has a hint label within the text field

Technical specifications

The search component requires you to provide a function to handle the search action. Replace doSearch() on the submit button with your own search function.


Accessibility

  • Add role="search" on the component to increase its discoverability to assistive technologies and trigger the search keyboard on mobile devices.
  • The for attribute of the label must exactly match the id of the search input box.
  • Avoid using placeholder text inside the text input field, as it is not consistently recognized by assistive technologies. Use hint text above the input field instead.

If you have any questions or feedback, please get in touch.