<h2>When to use</h2>
<p>Search and text input components are not used for the same purpose, so consider the use case when choosing between them. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities or those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Search</td>
<td>Used for locating keywords or phrases within a specific context. It can be placed on a website or embedded in a table or drawer.</td>
</tr>
<tr>
<td><a href="/components/text-input">Text input</a></td>
<td>For single-line, short entries, use the text input component. It’s commonly used for name, phone number, or email entries in forms.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The search component contains four elements.</p>
<details data-name='image-block' data-images='[{"alt":"Visual asset of a search component and its four elements.","caption":"The search component contains four main elements. \n\n1. Label (optional): describes the purpose of the field.\n2. Placeholder text: offers contextual guidance. It is required when no label is present.\n3. Input: displays input field container.\n4. Mini button icon only: appears on the right side of the input field.","url":"https://dds.dell.com/site/production/15/17/Search_Anatomy_304d0da05c.png"}]' data-numberofcolumns='1'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit the NN/g website","path":"https://www.nngroup.com/articles/search-visible-and-simple/","type":"External"},"title":"Search: visible and simple","description":"Read the Nielsen Norman Group&#39;s article on search.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit the NN/g website","path":"https://www.nngroup.com/articles/search-not-enough/","type":"External"},"title":"Search is not enough","description":"Read the Nielsen Norman Group&#39;s article on search and navigation.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

The Search component is used for locating specific terms or phrases. It is commonly used to improve site-wide findability and within contained contexts such as tables or other on-page content. However, it can be applied broadly to include a multi-site scope. 

Your use case should determine the scope of the component’s search feature, whether it’s to improve navigation in an ecosystem or to narrow down content within a dataset.

### Sitewide

A primary use case for the component is sitewide or application-wide search, enhancing findability and providing a secondary way to navigate an experience aside from the site navigation. 

The search is typically located within the masthead of every page, giving the component priority visibility.

<details data-name='image-block' data-images='[{"alt":"Search component being used in a website","caption":"","url":"https://dds.dell.com/site/production/4c/c9/Search_Site_Wide_2de4adb025.png"}]' data-numberofcolumns='1'></details>

### Embedded

In experiences that contain complex features, you can use an embedded search component to narrow down content in a dataset, a library of assets, or within a product catalog. It provides a secondary way for users to find what they need, rather than just relying on scrolling through content.

<details data-name='image-block' data-images='[{"alt":"Search component used in an icon library within a page.","caption":"","url":"https://dds.dell.com/site/production/d0/3e/Search_Embedded_fa78cfe78c.png"}]' data-numberofcolumns='1'></details>

## Sizes

Search can be applied in two sizes: small or large. 


Small and large are differentiated in the label size and input heights, not input width.

Consider the experience and layout you are creating when choosing a size. 

<details data-name='image-block' data-images='[{"alt":"small search component","caption":"Small search occupies less screen space, making it more suitable for embedded use cases or situations where a compact search experience is preferred.","url":"https://dds.dell.com/site/production/27/6a/Search_Size_Small_b4b4839bf6.png"},{"alt":"large search component","caption":"Large search is usually placed on an entire page, where the search feature is important and should be visible for the user.","url":"https://dds.dell.com/site/production/ed/1c/Search_Size_Large_242c9d3ef1.png"}]' data-numberofcolumns='2'></details>

## Interaction

### Behavior and states

The component will visually reflect the status of the user interaction. 


The states are represented by different colors or opacity. Any buttons associated with the component follows its own behaviors and states as described on the [button](<>) page.


Search can communicate four states: rest, hover, focus, and inactive. 

<details data-name='image-block' data-images='[{"alt":"Search component in rest, hover, focus, and inactive states","caption":"","url":"https://dds.dell.com/site/production/b8/6e/Search_Interaction_eb6e9d54e8.png"}]' data-numberofcolumns='1'></details>

| State    | Behavior                                                                                                                                          |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | The rest state is the starting or ending state, indicating the search component is empty or filled.                                               |
| Hover    | When a user hovers over a selection, a highlight appears, indicating the field is selectable.                                                     |
| Focus    | A blue outline appears around the search input when a user tabs or uses keyboard controls to navigate selections.                                 |
| Inactive | Inactive search component should be used rarely and are displayed with 40% opacity, indicating the field exists but is not available to the user. |

## Standards

### Accessibility

#### Consider using a search mechanism to help users locate information easily and in multiple ways

Search enables users to find information more easily and accurately, including people with visual impairments and cognitive limitations or disabilities. 

When a site search is paired with breadcrumbs, navigation menus, and/or link lists, it allows users to choose their preferred way to locate content.

WCAG 2.2: [2.4.5 Multiple Ways](<>)

#### [](<>)Do not use placeholder text to communicate critical search information

Placeholder text can confuse some people by resembling inputted text and making the search field less recognizable. Additionally, placeholder instructions will disappear on active input. 

If certain information or formatting is required to search successfully, that should be clearly indicated in advance. If possible, use a label and avoid placeholder text to provide a more accessible experience.

WCAG 2.2: [1.3.1 Info and Relationships](<>), [3.3.2 Labels or Instructions](<>)

#### [](<>)[](<>)Use a label for any search component that is not global or default search

The default expectation is that the search will be global and search all site content. If the search is a more limited search, such as a customer database, a label should make it clear what people can search for. 

If search components are added to a page with a global search component already present, they should always be labeled to clearly differentiate them.

WCAG 2.2: [1.3.1 Info and Relationships](<>)

#### [](<>)Place each search component in a search landmark

To aid screen reader users in navigation, each search should be enclosed by an ARIA search landmark region. Each instance should have a unique identifying label, unless duplicate searches perform the same function.

WCAG 2.2: [2.4.1 Bypass Blocks](<>)

### Content

#### Clear and concise labels

Labels are optional in a search component. However, labels are used to identify and describe the search purpose, providing guidance and assuring readability and accessibility. 

Label text should be left-aligned (or right-aligned for right-to-left languages) with the search input. 

Write label text in sentence case and be clear, being as succinct as possible.

**Do**: Search products

**Don’t**: Search Products

**Don’t**: Search for products here

#### Placeholder text

Using placeholder text on its own introduces accessibility problems as it’s not read by screen readers and it disappears when the user begins entering text. 

When using a placeholder in a search, make sure it is not responsible for providing an important information regarding the input usage.

Design



To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-search--basic).

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-search--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-search--basic).

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-search--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-search--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-search--docs&viewMode=docs&websiteFrame=true'></details>

Search is an input that allows users to look for a specific keyword or phrase and obtain results related to the context in which it is placed.

Search

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
