Search field

A search field lets users specify a word or phrase to filter relevant content within a specific page section. For example, filter the content in a data grid or a list of content.

  <sl-search-field placeholder="Search"></sl-search-field>

When to use

Fast Findings

Making it easier for the user to find specific items within large data volumes. Users expect this feature for streamlined access, especially in interfaces with dynamic content. Improving task efficiency and usability ensures users access relevant information seamlessly, for example, by filtering a list of dynamic content like cards.

Use a search field within a specific page section when users need to search data, such as in a data table. This implementation ensures that users can efficiently locate and filter data within that section, maintaining consistency and usability across the product. It enhances the user experience by providing targeted, relevant search results without the need to navigate away from the current context.

When not to use

Small Data

Avoid using a search field within a page section when dealing with small or limited data. Additionally, refrain from implementing it when the information is simple and easily accessible within a single view. In such cases, a search field may be unnecessary and could complicate the user experience rather than enhance it. Use it for scenarios where it adds value and helps maintain a clean and efficient interface.


Search field are a combination of a tab list and a tab panel. The tab list contains the navigation tabs. When there is overflow, it shows the "more button" to open the tabs popover. The tab panel presents content for selected tabs.

1IconThe icon improves the visibility.Yes
2PlaceholderThe plaholder provide an clue to user.Yes
1InputWhen the user enter their inputs.Yes
1Clear ButtonThis button clear the user's input. It only appears when there is an input.Yes
1Search ButtonSearch action button.No

States and Status

Search field share the same behaivour as an Input field. That provide it with the same states, each suited for different interactions. The states provided are default, hover, active, disabled and focus.


With these options, you can tweak the appearance of the Search field in Figma. They are available in the Design Panel so you can compose the spinner to exactly fit the user experience need for the use case you are working on.

Size'md', 'lg'This are the sizes of the Search field. The mdis the default size.
State'Default', 'Hover', 'Active', 'Disabled'The states of the Search field.
Placeholder'On', 'Off'Toogle to switch between the placeholder and the input value.
Label'On', 'Off'Toogle to display the Field Label.


Understanding the behavior of Search field is crucial for creating intuitive and user-friendly content access. Search field exhibit the same behaviors of the Text field, and one more.

When the users introduce their search value, a restart button will clear the search field values to make it easier for all users to start a new search.

Interactive example