TextField

A text field component for your forms.

Label

Usage#

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

<TextField />

API reference#

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

Examples#

Sizes#

We support two different sizes: small, medium.

<Flex direction="row" gap="4">
  <TextField size="small" placeholder="Small" icon={<Icon name="sparkling" />} />
  <TextField size="medium" placeholder="Medium" icon={<Icon name="sparkling" />} />
</Flex>

With description#

Here's a simple TextField with a description.

Label

Description

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

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-TextField
bui-TextField[data-invalid="true"]
bui-TextField[data-invalid="false"]
bui-TextField[data-disabled="true"]
bui-TextField[data-disabled="false"]
bui-TextField[data-size="small"]
bui-TextField[data-size="medium"]
bui-InputWrapper
bui-Input
bui-InputIcon
bui-InputAction