TextField

A text input with label, description, icon, and validation support.

Label

Usage#

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

<TextField label="Email" type="email" />

API reference#

Prop	Type	Default	Description
size	smallmedium	small	Visual size of the input. Use small for dense layouts, medium for prominent fields.
label	string	-	Visible label displayed above the input.
secondaryLabel	string	-	Secondary text shown next to the label. If not provided and isRequired is true, displays Required.
description	string	-	Help text displayed below the label.
icon	ReactNode	-	Icon rendered before the input.
type	textemailtelurl	text	HTML input type. Use SearchField for search inputs and PasswordField for passwords.
placeholder	string	-	Text displayed when the input is empty.
name	string	-	Form field name for submission.
isRequired	boolean	-	Whether the field is required for form submission.
isDisabled	boolean	-	Whether the input is disabled.
isReadOnly	boolean	-	Whether the input is read-only.
value	string	-	Controlled value of the input.
defaultValue	string	-	Default value for uncontrolled usage.
onChange	(value: string) => void	-	Handler called when the input value changes.
className	string	-	Additional CSS class name for custom styling.
style	CSSProperties	-	Inline CSS styles object.

Inherits all React Aria TextField props.

Examples#

Sizes#

<Flex direction="column" gap="4">
  <TextField
    size="small"
    name="url"
    placeholder="Enter a URL"
    icon={<RiSparklingLine />}
  />
  <TextField
    size="medium"
    name="url"
    placeholder="Enter a URL"
    icon={<RiSparklingLine />}
  />
</Flex>

With description#

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

Label

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