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
    name="url"
    placeholder="Enter a URL"
    size="small"
    icon={<RiSparklingLine />}
  />
  <TextField
    name="url"
    placeholder="Enter a URL"
    size="medium"
    icon={<RiSparklingLine />}
  />
</Flex>

With description#

Here's a simple TextField with a description.

Label

Description

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

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