Component

Search

Description 

The Illinois components search box presents a formatted look and feel for interacting with your site’s search engine. 

What it looks like 

Example image (version 2.4, Dec. 8, 2021) 

Sample patterns 

By default

This is the simplest implementation of a search box, with slot, action, method, and searchname specified.

<il-search slot="search" action="https://help.toolkit.illinois.edu" method="get" searchname="s"></il-search>

Putting suggestion text in the search box

Use placeholder=”((your text goes here))” to pre-fill the search box with suggestion text.

<il-search slot="search" action="https://help.toolkit.illinois.edu" method="get" searchname="s" placeholder="This is the placeholder text"></il-search>

Syntax guide 

action

• Syntax:

<il-search action="((your action URL goes here))"></il-search>

• Value: The “action” for the form (where the form information is sent to). 
• Default value: ”
• Required: Yes 
• Details: You’ll also need at least a method to make this work.

label

• Syntax:

<il-search label="((the name of this search box, usually Search))"></il-search>

• Value: The label for the search component, helpful for accessibility. 
• Default value: Search
• Required: No 
• Details: If you don’t specify another label, the word Search will be used. Different labels are mostly helpful if you have more than one search box on a page.

method

• Syntax:

<il-search method="GET"></il-search>

• Value: The method for the search (either GET or POST). 
• Default value: None
• Required: Yes 

searchname

• Syntax:

<il-search searchname="((how you want to identify this search))"></il-search>

• Value: The variable you want to use to identify this search as part of a URL — for example, searchname="s" would produce something like ?s=xxxxxxxx in your resulting URL.  
• Default value: None
• Required: Yes 

placeholder

• Syntax:

<il-search placeholder="((sample text to display in the search box))"></il-search>

• Value: Placeholder text in the search box before a user starts typing in it. 
• Default value: Search this site
• Required: No 
• Details: If you have more than one search box in a page, you may wish to use different placeholder text to help readers distinguish what each of them is for. 

slot 

• Syntax:

     <il-search slot="search"></il-search>

• Value: Which slot this component is for (in this case, search) 
• Default value: Nothing  
• Required: Yes

About this component 

• Type: Component 
• Introduced in: v2.3.0; 9/29/2021 
• Deprecated?: No