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.
## 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
### 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.
```jsx
import { TextField } from '../../ui/component-library/text-field';
;
```
### On Clear
Use the `onClear` prop to perform additional actions when the clear button is clicked.
```jsx
import { TextField } from '../../ui/component-library/text-field';
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.
```jsx
import {
SIZES,
COLORS,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import { TextField } from '../../ui/component-library/text-field';
;
```