import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as InputStories from './Input.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta title="Form/Input" of={InputStories} />

<Title>Input</Title>
<Subtitle>
  HTML `&lt;input&gt;` with Blocks design tokens applied. The base for all text
  input controls.
</Subtitle>
<LifecycleTag variant="Stable" />
**Component type:** HTML wrapper

<Canvas of={InputStories.Default} layout="padded" sourceState="shown" />
<Controls of={InputStories.Default} />

## When to use

Use `Input` for simple text inputs that don't need a leading icon, validation state icons, or a password toggle. For those features, use `FieldInput`. To add a label, helper text, or error message, wrap with `Field`.

## Import

```tsx
import { Input } from '@chainlink/blocks'
```

## Anatomy

```tsx
<Input placeholder="Enter text..." />
```

## Examples

### Sizes

<Canvas of={InputStories.Small} layout="padded" sourceState="shown" />
<Canvas of={InputStories.Xs} layout="padded" sourceState="shown" />

### Error state

<Canvas of={InputStories.ErrorState} layout="padded" sourceState="shown" />

### Disabled

<Canvas of={InputStories.Disabled} layout="padded" sourceState="shown" />

### Width variants

<Canvas of={InputStories.Widths} layout="padded" sourceState="shown" />

## Related components

- `FieldInput` for inputs with icons, validation states, or password toggle
- `Field` to add a label, helper text, or error message