SearchField

A SearchField is a text field designed for searches.

Label

Usage#

import { SearchField } from '@backstage/ui';

<SearchField />

API reference#

Prop	Type	Default	Responsive
size	smallmedium	small	Yes
label	string	-	No
icon	ReactNode	-	No
description	string	-	No
name	string	-	No
startCollapsed	boolean	false	No
className	string	-	No
style	CSSProperties	-	No

Examples#

Sizes#

We support two different sizes: small, medium.

<Flex direction="row" gap="4">
  <SearchField name="url" aria-label="Search" size="small" />
  <SearchField name="url" aria-label="Search" size="medium" />
</Flex>

With description#

Here's a simple SearchField with a description.

Label

Description

<SearchField
  name="url"
  label="Label"
  description="Description"
  aria-label="Search"
/>

Collapsible#

You can make the SearchField collapsible by setting the startCollapsed prop to true.

<Flex direction="column" gap="4">
  <Flex direction="row" gap="4">
    <SearchField
      name="url"
      aria-label="Search"
      size="small"
      startCollapsed
    />
    <SearchField
      name="url"
      aria-label="Search"
      size="medium"
      startCollapsed
    />
  </Flex>
  <SearchField name="url" aria-label="Search" size="small" startCollapsed />
</Flex>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-SearchField
bui-SearchField[data-startCollapsed="true"]
bui-SearchField[data-startCollapsed="false"]
bui-SearchField[data-size="small"]
bui-SearchField[data-size="medium"]
bui-SearchFieldClear
bui-SearchFieldInputWrapper
bui-SearchFieldInput
bui-SearchFieldInputIcon