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 size="small" placeholder="Small" icon={<Icon name="sparkling" />} />
  <SearchField size="medium" placeholder="Medium" icon={<Icon name="sparkling" />} />
</Flex>

With description#

Here's a simple SearchField with a description.

Label

Description

<SearchField label="Label" description="Description" placeholder="Enter a URL" />

Collapsible#

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

<SearchField startCollapsed />

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