import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Input from '../Input';
import * as InputStories from './Input.stories';

<Meta of={InputStories} />

# Input

<br />

## `Inputs` provide a way to quickly add common functionality around form inputs.

<br />

### Input text

<Canvas>
  <Story of={InputStories.InputText} />
</Canvas>

### With label

<Canvas>
  <Story of={InputStories.WithLabel} />
</Canvas>

### Required

<Canvas>
  <Story of={InputStories.Required} />
</Canvas>

### With placeholder

<Canvas>
  <Story of={InputStories.WithPlaceholder} />
</Canvas>

### With default value

<Canvas>
  <Story of={InputStories.WithDefaultValue} />
</Canvas>

### Read only

<Canvas>
  <Story of={InputStories.ReadOnly} />
</Canvas>

### With hidden label (a11y)

<Canvas>
  <Story of={InputStories.WithHiddenLabelA11Y} />
</Canvas>

### Disabled

<Canvas>
  <Story of={InputStories.Disabled} />
</Canvas>

### Number

<Canvas>
  <Story of={InputStories.Number} />
</Canvas>

### Email

<Canvas>
  <Story of={InputStories.Email} />
</Canvas>

### With hint

<Canvas>
  <Story of={InputStories.WithHint} />
</Canvas>

### Phone with addon

<Canvas>
  <Story of={InputStories.PhoneWithAddon} />
</Canvas>

### With error

<Canvas>
  <Story of={InputStories.WithError} />
</Canvas>

## Usage Example

```jsx
import Input from '@appdirect/sfb-theme-components/src/atoms/input/Input';

<Input name="name" label="Label" />
```

## Props

<ArgsTable of={Input} />
