> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# EquaInput

> Design system reference for EquaInput, including Storybook, Figma, screenshots, and usage guidance

# EquaInput

> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaInput.stories.tsx`, Line: 6

## Purpose

Text, password, numeric, validation, icon, and grouped input controls.

## Storybook

| Story               | Reference                                                                       |
| ------------------- | ------------------------------------------------------------------------------- |
| Default             | [Storybook](http://localhost:6006/?path=/story/equa-input--default)             |
| With Label          | [Storybook](http://localhost:6006/?path=/story/equa-input--with-label)          |
| Password            | [Storybook](http://localhost:6006/?path=/story/equa-input--password)            |
| With Error          | [Storybook](http://localhost:6006/?path=/story/equa-input--with-error)          |
| Disabled            | [Storybook](http://localhost:6006/?path=/story/equa-input--disabled)            |
| Number              | [Storybook](http://localhost:6006/?path=/story/equa-input--number)              |
| Interactive         | [Storybook](http://localhost:6006/?path=/story/equa-input--interactive)         |
| Form Example        | [Storybook](http://localhost:6006/?path=/story/equa-input--form-example)        |
| Search              | [Storybook](http://localhost:6006/?path=/story/equa-input--search)              |
| Search Disabled     | [Storybook](http://localhost:6006/?path=/story/equa-input--search-disabled)     |
| Currency            | [Storybook](http://localhost:6006/?path=/story/equa-input--currency)            |
| Multiple Currencies | [Storybook](http://localhost:6006/?path=/story/equa-input--multiple-currencies) |

## API And Props

| Prop or Control | Source                            | Notes                                 |
| --------------- | --------------------------------- | ------------------------------------- |
| UNVERIFIED      | Not exposed in Storybook argTypes | Review component TypeScript interface |

Sources:

* `equa-patternlib-nextjs/src/components/input/input.tsx`, Line: 5
* `equa-patternlib-nextjs/src/components/input/index.ts`
* `equa-patternlib-nextjs/stories/EquaInput.stories.tsx`, Line: 6

## Figma

UNVERIFIED -- requires Figma node assignment

## Screenshots

| State           | Asset                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-input/equa-input--default-equa.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=36623dcd46a3dfe12608add107b2046f" alt="EquaInput dark theme" width="1366" height="900" data-path="images/design-system/components/equa-input/equa-input--default-equa.png" />          |
| Light theme     | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-input/equa-input--default-light.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=d8f83ea5fd89c184157216955e78ef44" alt="EquaInput light theme" width="1366" height="900" data-path="images/design-system/components/equa-input/equa-input--default-light.png" /> |

## Usage Notes

* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).

## Accessibility Notes

* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.