<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Search icon placement:</strong> The search icon now appears on the left side of the field, giving users context before they start typing. This placement also frees the right side for optional support icons (microphone, clear button, and more).</li>
<li><strong>Search button behavior:</strong> The component now clearly distinguishes between auto search (results update as the user types) and manual search (the user triggers search with a button).</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Search provides a quick way to locate information within a specific context.</p>
<p>Use the search component to:</p>
<ul>
<li>Help users find keywords or phrases without manually scanning content.</li>
<li>Filter or narrow results in tables, lists, or data-heavy views.</li>
<li>Improve efficiency in dense interfaces by reducing the number of steps to reach information.</li>
</ul>
<p>Search and text input components serve different purposes. Choose the component based on the task. Selecting the right one improves clarity for all users, including people with cognitive 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>Use for finding keywords or phrases within a specific context. Place it on a page, inside a table, or within a drawer.</td>
</tr>
<tr>
<td><a href="/components/text-input">Text input</a></td>
<td>Use for short, single‑line entries such as a name, phone number, or email. Commonly used in forms.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The search component contains six elements.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/search?tab=Design#design-layout">layout</a> section.</p>
<details data-name='image-block' data-images='[{"alt":"Visual asset of a search component and its elements.","caption":"1. Label (optional): Describes the purpose of the field.\n2. Search icon: Appears on the left side inside the input field.\n3. Placeholder text: Provides contextual guidance. Required when no label is present.\n4. Input: Displays the input field container.\n5. Clear button: Clears the current input with a single action. It appears only when text is present in the field.\n6. Search button (manual search): Triggers the search manually. This button is shown only in components where results do not load automatically as the user types.","url":"https://dds.dell.com/site/v3/components/search/search-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

The search component helps users find specific terms or phrases within a defined context. It improves findability in both broad, site‑wide experiences and in contained areas such as tables, lists, or product catalogs. Choose this component when users need to locate information quickly instead of scanning through content manually.

Your use case should guide how broad or narrow the search experience should be.

### Sitewide

Use sitewide search when users need to explore or filter content across an entire application or website. This mode supports global findability and often serves as a primary navigation tool.

A sitewide search is typically placed in the masthead or another persistent, high‑visibility area so it’s easy to find and always available.

<details data-name='image-block' data-images='[{"alt":"Search component being used in a website","caption":"Example of a sitewide search component.","url":"https://dds.dell.com/site/v3/components/search/search-usage-wide.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Embedded

Use embedded search when users need to narrow content within a specific area, such as a dataset, library, product catalog, or a single page. It provides a more focused way to locate items within long lists or structured content.

Embedded search is ideal when users already know what they’re looking for and need to filter results within the current view.

<details data-name='image-block' data-images='[{"alt":"Search component used in an icon library within a page.","caption":"Example of an embedded search component.","url":"https://dds.dell.com/site/v3/components/search/search-usage-embedded.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

### Options

Search components can appear with or without a visible label. Choose the option that best fits the context and available space.

**With label**
Use a label when you need to clearly describe the purpose of the search field. This option is recommended in forms, settings pages, or any place where multiple input fields appear together.

**Without label**
Use the no‑label option when the search purpose is already obvious from the surrounding layout. For example, a global search bar at the top of a page. When no label is shown, a descriptive placeholder is required.

### Search modes

The search component supports two modes that define how users trigger a search. Use the mode that best matches the expected interaction pattern.

#### Active, auto search

Active search updates results automatically as the user types.

* No search button is shown
* The search starts after the 4th typed character
* Useful when users need quick, continuous feedback or are refining results in real time

<details data-name='image-block' data-images='[{"alt":"Illustration of active search","caption":"Example of an active search","url":"https://dds.dell.com/site/v3/components/search/search-kinds-search-active.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Passive, manual search

Passive search waits for the user to trigger the search.

* A search button appears on the right side of the field
* The search runs only when the user clicks the button
* Helpful when users may need to review their input first or when automatic searching isn’t efficient

<details data-name='image-block' data-images='[{"alt":"Illustration of a passive search","caption":"Example of a passive search","url":"https://dds.dell.com/site/v3/components/search/search-kinds-searcha-passive.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

Search can be applied in two sizes: 

* **Large search:** is usually placed on an entire page, where the search feature is important and should be visible for the user.
* **Small search**: occupies less screen space, making it more suitable for embedded use cases or situations where a compact search experience is preferred.

They 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/v3/components/search/search-size-small.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/v3/components/search/search-size-large.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"Search component building block and slot","caption":"Example of the component with building block and slot.","url":"https://dds.dell.com/site/v3/components/search/search-slot.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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](/components/button) page.

Search supports 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":"Diagram showing the possible states for search.","url":"https://dds.dell.com/site/v3/components/search/search-interaction-states.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State    | Behavior                                                                                                                         |
| -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | Diagram showing the five possible states for radio buttons.                                                                      |
| Hover    | When the user hovers over the field, show a highlight to indicate it is interactive.                                             |
| Focus    | Show a blue outline around the search field when the user tabs into it or uses keyboard navigation.                              |
| Inactive | Use the inactive state sparingly. Display the field with 40% opacity to indicate it exists but is not available for interaction. |

## 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


## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                              | Collection | CSS var                                      | Preview  |
| --------------------------------- | ---------- | -------------------------------------------- | -------- |
| spacing/xs                        | Semantic   | `var(--dds-spacing-xs)`                      | -        |
| color/text/secondary              | Semantic   | `var(--dds-color-text-secondary)`            | #293B4D  |
| input/gap/sm                      | Component  | `var(--dds-input-gap-sm)`                    | -        |
| input/padding-horizontal/sm       | Component  | `var(--dds-input-padding-horizontal-sm)`     | -        |
| search/height/sm                  | Component  | `var(--dds-search-height-sm)`                | -        |
| border/radius/xs                  | Semantic   | `var(--dds-border-radius-xs)`                | -        |
| border/width/xs                   | Semantic   | `var(--dds-border-width-xs)`                 | -        |
| color/background/SURFACE/neutral  | Semantic   | `var(--dds-color-background-surface-neutral)`| #FFFFFF  |
| color/border/NEUTRAL/pale         | Semantic   | `var(--dds-color-border-neutral-pale)`       | #C5D4E3  |
| icon/size/xs                      | Component  | `var(--dds-icon-size-xs)`                    | -        |
| color/text/tertiary               | Semantic   | `var(--dds-color-text-tertiary)`             | #5C6E7E  |
| button/size/xs                    | Component  | `var(--dds-button-size-xs)`                  | -        |
| button/background/ghost-rest      | Component  | `var(--dds-button-background-ghost-rest)`    | -        |
| color/text/NEUTRAL/rest           | Semantic   | `var(--dds-color-text-neutral-rest)`         | #1D2C3B  |
| button/gap/sm                     | Component  | `var(--dds-button-gap-sm)`                   | -        |
| button/padding-horizontal/sm      | Component  | `var(--dds-button-padding-horizontal-sm)`    | -        |
| button/size/sm                    | Component  | `var(--dds-button-size-sm)`                  | -        |
| icon/size/sm                      | Component  | `var(--dds-icon-size-sm)`                    | -        |
| color/text/BRAND/rest             | Semantic   | `var(--dds-color-text-brand-rest)`           | #0063B8  |
| size/4                            | Global     | `var(--dds-size-4)`                          | -        |
| size/16                           | Global     | `var(--dds-size-16)`                         | -        |
| color/purple/10                   | Global     | `var(--dds-color-purple-10)`                 | #FBEBFF  |
| color/purple/80                   | Global     | `var(--dds-color-purple-80)`                 | #66278F  |
| input/gap/lg                      | Component  | `var(--dds-input-gap-lg)`                    | -        |
| input/padding-horizontal/lg       | Component  | `var(--dds-input-padding-horizontal-lg)`     | -        |
| search/height/lg                  | Component  | `var(--dds-search-height-lg)`                | -        |
| button/gap/md                     | Component  | `var(--dds-button-gap-md)`                   | -        |
| button/padding-horizontal/md      | Component  | `var(--dds-button-padding-horizontal-md)`    | -        |
| button/size/md                    | Component  | `var(--dds-button-size-md)`                  | -        |
| icon/size/md                      | Component  | `var(--dds-icon-size-md)`                    | -        |
| color/border/BRAND/base           | Semantic   | `var(--dds-color-border-brand-base)`         | #00468B  |
| color/background/SURFACE/inactive | Semantic   | `var(--dds-color-background-surface-inactive)` | #E1E1E1 |
| color/border/INACTIVE/base        | Semantic   | `var(--dds-color-border-inactive-base)`      | #7E7E7E  |
| color/text/inactive               | Semantic   | `var(--dds-color-text-inactive)`             | #B6B6B6  |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-search--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-search--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-search--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-search--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-search--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-search--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></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.