import { ArgTypes, Canvas, Story, Meta } from '@storybook/addon-docs/blocks';
import * as TextInputStories from './TextInput.stories';
import * as PasswordInputStories from './PasswordInput.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# TextInput

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TextInput)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/text-input/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/text-input/accessibility)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
  - [Fluid](#fluid)
  - [Read Only](#read-only)
  - [Skeleton](#skeleton)
  - [AI Label](#ai-label)
  - [With Layer](#with-layer)
  - [Password Input](#password-input)
- [Component API](#component-api)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

Text inputs enable users to enter free-form text data. The type of text field
used should reflect the length of the content you expect the user to enter. The
default text input is for short, one-line content.

<Canvas
  of={TextInputStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(TextInputStories.Default),
    },
  ]}
/>

### Fluid

<Canvas
  of={TextInputStories.Fluid}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(TextInputStories.Fluid),
    },
  ]}
/>

### Read Only

<Canvas
  of={TextInputStories.ReadOnly}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(TextInputStories.ReadOnly),
    },
  ]}
/>

### Skeleton

<Canvas
  of={TextInputStories.Skeleton}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(TextInputStories.Skeleton),
    },
  ]}
/>

### AI Label

<Canvas
  of={TextInputStories.withAILabel}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(TextInputStories.withAILabel),
    },
  ]}
/>

### With Layer

<Canvas of={TextInputStories._WithLayer} />

### Password Input

Password input is a variant of text input in it's on story called
[PasswordInput](https://react.carbondesignsystem.com/?path=/story/components-passwordinput--default).
It is used to collect private data and will hide the characters as a user enters
them. A user can choose to toggle on the character visibility by clicking the
view icon on the far right of the input field. When using a password input be
sure to provide detailed helper text listing any requirements related to the
data format, such as types of characters allowed or date structure.

`TextInput.Password` is deprecated, use
[PasswordInput](https://react.carbondesignsystem.com/?path=/story/components-passwordinput--default)
component instead.

## Component API

<ArgTypes />

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/TextInput/TextInput.mdx).TextInputStories,
