import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { TextInput } from './text-input.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="TextInput" component={TextInput} />

# Text Input

- [Form Input Accessibility
  Tips](/?path=/story/components-inputs-accessibility-tips--page)

A text input field. Supports the following masking modes:

- date
- email
- number
- text
- password

## Stories

### Small, Visible Label

<Canvas>
  <Story id="components-inputs-textinput--kitchen-sink-small-visible-label" />
</Canvas>

### Small, Hidden Label with Placeholder

<Canvas>
  <Story id="components-inputs-textinput--kitchen-sink-small-hidden-label-with-placeholder" />
</Canvas>

### Large, Visible Label

<Canvas>
  <Story id="components-inputs-textinput--kitchen-sink-large-visible-label" />
</Canvas>

### Large, Hidden Label with Placeholder

<Canvas>
  <Story id="components-inputs-textinput--kitchen-sink-large-hidden-label-with-placeholder" />
</Canvas>

### Large, Floating Label

<Canvas>
  <Story id="components-inputs-textinput--kitchen-sink-large-floating-label" />
</Canvas>
