TextField

Usage

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

<TextField />

API reference

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.

<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

Changelog