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!

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

Usage in forms with Field

Use AutoSizeInputwith theFieldcomponent to get labels and descriptions. Also, you can useAutoSizeInputwith therequiredattribute for validation. See theField component for more information.

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

Props

<ArgTypes of={AutoSizeInput} />