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

# <Input />

<Frame>
  <iframe height={90} width="100%" src="https://morph-data-components-storybook.netlify.app/iframe.html?args=&globals=&id=input-components-input--input-story" />
</Frame>

`<Input>` は、`defineState()` 関数で宣言した状態に、値を入力するためのコンポーネントです。

```tsx theme={"dark"}
import { defineState } from '@morph-data/components';

export const { useName } = defineState({ userName: '' });

<Input state={userName} />
```

## プロパティ

<ParamField path="state" type="State" required>
  コンポーネントの入力値をバインドするStateオブジェクト。 `defineState()` 関数で宣言した状態を指定してください。
</ParamField>

<ParamField path="type" type="string">
  HTMLの `<input>` タグの `type` プロパティ
</ParamField>