import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { TextField } from './text-field';
# TextField
`TextField` lets user enter a text data into a boxed field. It can sometimes contain related information or controls.
## Props
The `TextField` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
### Size
Use the `size` prop to set the height of the `TextField`.
Possible sizes include:
- `sm` 32px
- `md` 40px
- `lg` 48px
Defaults to `md`
```jsx
import { Size } from '../../../helpers/constants/design-system';
import { TextField } from '../../component-library';
```
### Type
Use the `type` prop to change the type of input.
Possible types include:
- `text`
- `number`
- `password`
Defaults to `text`.
```jsx
import { TextField } from '../../component-library';
// (Default)
```
### Truncate
Use the `truncate` prop to truncate the text of the the `TextField`. Defaults to `true`.
```jsx
import { TextField } from '../../component-library';
; // truncate is set to `true` by default
;
```
### Start accessory End Accessory
Use the `startAccessory` and `endAccessory` props to add components such as icons or buttons to either side of the `TextField`.
```jsx
import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
import { Icon, IconName } from '../../component-library/deprecated'
import { ButtonIcon, TextField } from '../../component-library';
}
/>
}
/>
}
endAccessory={}
/>
}
endAccessory={
isAddressValid && (
)
}
/>
```
### Input Ref
Use the `inputRef` prop to access the ref of the `` html element of `TextField`. This is useful for focusing the input from a button or other component.
```jsx
import { Button, TextField } from '../../component-library';
const inputRef = useRef(null);
const [value, setValue] = useState('');
const handleOnClick = () => {
inputRef.current.focus();
};
const handleOnChange = (e) => {
setValue(e.target.value);
};
```
### Input Component
Use the `InputComponent` prop change the component used for the input element. This is useful for replacing the base input with a custom input while retaining the functionality of the `TextField`.
Defaults to the [Text](/docs/components-componentlibrary-text--default-story) component
To function fully the custom component should accept the following props:
- `aria-invalid`
- `as`
- `autoComplete`
- `autoFocus`
- `backgroundColor`
- `defaultValue`
- `disabled`
- `focused`
- `id`
- `margin`
- `maxLength`
- `name`
- `onBlur`
- `onChange`
- `onFocus`
- `padding`
- `paddingLeft`
- `paddingRight`
- `placeholder`
- `readOnly`
- `ref`
- `required`
- `value`
- `variant`
- `type`
```jsx
import { TextField, Icon, IconName } from '../../component-library';
// should map the props to the custom input component
const CustomInputComponent = () =>
{/* Custom input component */}
;
const TextFieldCustomInput = (args) => (
}
/>
);
```
### Auto Complete
Use the `autoComplete` prop to set the autocomplete html attribute. It allows the browser to predict the value based on earlier typed values.
```jsx
import { TextField } from '../../component-library';
;
```
### Auto Focus
Use the `autoFocus` prop to focus the `TextField` during the first mount
To view story see [Canvas tab](/story/components-componentlibrary-textfield--auto-complete). Removing it from docs because created annoying reading experience 😁
```jsx
import { TextField } from '../../component-library';
;
```
### Default Value
Use the `defaultValue` prop to set the default value of the `TextField`
```jsx
import { TextField } from '../../component-library';
;
```
### Disabled
Use the `disabled` prop to set the disabled state of the `TextField`
```jsx
import { TextField } from '../../component-library';
;
```
### Error
Use the `error` prop to set the error state of the `TextField`
```jsx
import { TextField } from '../../component-library';
;
```
### Max Length
Use the `maxLength` prop to set the maximum allowed input characters for the `TextField`
```jsx
import { TextField } from '../../component-library';
;
```
### Read Only
Use the `readOnly` prop to set the `TextField` to read only. When `readOnly` is true `TextField` will not have a focus state.
```jsx
import { TextField } from '../../component-library';
;
```
### Required
Use the `required` prop to set the `TextField` to required. Currently there is no visual difference to the `TextField` when required.
```jsx
import { TextField } from '../../component-library';
// Currently no visual difference
;
```