import { ArgTypes } from '@storybook/blocks';
import { AutoSizeInput } from './AutoSizeInput';
import { Field } from '../Forms/Field';
import { Icon } from '../Icon/Icon';
import { ExampleFrame } from '../../utils/storybook/ExampleFrame';

# AutoSizeInput

You can use it or regular text input. When used, AutoSizeInput resizes itself to the current content. For an array of data or tree-structured data, consider using `Select` or `Cascader` respectively.

## Prefix and suffix

To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the Preview!

```jsx
<AutoSizeInput prefix={<Icon name="search" />} />
```

<ExampleFrame>
  <AutoSizeInput prefix={<Icon name="search" />} />
</ExampleFrame>

## Usage in forms with Field

Use `AutoSizeInput`with the`Field`component to get labels and descriptions. Also, you can use`AutoSizeInput`with the`required`attribute for validation. See the`Field` component for more information.

```jsx
<Field label="Important information" description="This information is very important, so you really need to fill it in">
  <AutoSizeInput name="importantInput" required />
</Field>
```

<ExampleFrame>
  <Field label="Important information!" description="Please enter the relevant information.">
    <AutoSizeInput name="importantInput" required />
  </Field>
</ExampleFrame>

## Props

<ArgTypes of={AutoSizeInput} />
