metamask-extension/ui/components/component-library/text-field/README.mdx

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import { TextField } from './text-field';

# TextField

The `TextField` component lets users enter and edit text as well as adding a show clear button option. It wraps `TextFieldBase` and functions only as a controlled input.

<Canvas>
  <Story id="ui-components-component-library-text-field-text-field-stories-js--default-story" />
</Canvas>

## Props

The `TextField` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) and [TextFieldBase](/docs/ui-components-component-library-text-field-base-text-field-base-stories-js--default-story#props) component props

<ArgsTable of={TextField} />

### Show Clear

Use the `showClear` prop to display a clear button when `TextField` has a value. Clicking the button will clear the value.
You can also attach an `onClear` handler to the `TextField` to perform additional actions when the clear button is clicked.

<Canvas>
  <Story id="ui-components-component-library-text-field-text-field-stories-js--show-clear" />
</Canvas>

```jsx
import { TextField } from '../../ui/component-library/text-field';

<TextField showClear />;
```

### On Clear

Use the `onClear` prop to perform additional actions when the clear button is clicked.

<Canvas>
  <Story id="ui-components-component-library-text-field-text-field-stories-js--on-clear" />
</Canvas>

```jsx
import { TextField } from '../../ui/component-library/text-field';

<TextField showClear onClear={() => console.log('cleared input')} />;
```

### Clear Button Props and Clear Button Icon Props

Use the `clearButtonProps` and `clearButtonIconProps` props to pass props to the clear button and clear button icon respectively.

<Canvas>
  <Story id="ui-components-component-library-text-field-text-field-stories-js--clear-button-props-clear-button-icon-props" />
</Canvas>

```jsx
import {
  SIZES,
  COLORS,
  BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import { TextField } from '../../ui/component-library/text-field';

<TextField
  showClear
  clearButtonProps={{
    backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
    borderRadius: BORDER_RADIUS.XS,
    'data-testid': 'clear-button',
  }}
  clearButtonIconProps={{ size: SIZES.MD }}
/>;
```