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

# Input

> Text input with variants, sizes, an error state with message, and optional leading icon or trailing suffix slots.

<Frame>
  <iframe src="data:text/html;base64,PCEtLSBUaGlzIGZpbGUgaXMgYXV0by1nZW5lcmF0ZWQgYnkgc2NyaXB0cy9nZW5lcmF0ZS1kb2NzLnRzLiBEbyBub3QgZWRpdCBtYW51YWxseS4gLS0+CjwhRE9DVFlQRSBodG1sPgo8aHRtbCBsYW5nPSJlbiI+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9IlVURi04Ij4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQGp1by9jdXN0b21lci11aS9kaXN0L3dlYi1jb21wb25lbnRzLmlpZmUuanMiPjwvc2NyaXB0PgogIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9pbnRlci11aUAzLjE5LjMvaW50ZXIubWluLmNzcyIgLz4KICA8c3R5bGU+CiAgICAqIHsgYm94LXNpemluZzogYm9yZGVyLWJveDsgbWFyZ2luOiAwOyBwYWRkaW5nOiAwOyB9CiAgICBodG1sLCBib2R5IHsgaGVpZ2h0OiAxMDAlOyB9CiAgICBib2R5IHsgZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsganVzdGlmeS1jb250ZW50OiBjZW50ZXI7IGZvbnQtZmFtaWx5OiAiSW50ZXIgdmFyIiwgc2Fucy1zZXJpZjsgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7IC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7IH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgoKPGRpdiBzdHlsZT0id2lkdGg6MjQwcHg7IGZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7Ij4KICA8anVvLWlucHV0IHBsYWNlaG9sZGVyPSJMYWJlbCI+PC9qdW8taW5wdXQ+CjwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4K" style={{ width: "100%", height: "120px", border: "none" }} />
</Frame>

<Accordion title="Example code">
  ```html theme={null}

  <div style="width:240px; font-family:sans-serif;">
    <juo-input placeholder="Label"></juo-input>
  </div>
  ```
</Accordion>

Text input with variants, sizes, an error state with message, and optional leading icon or
trailing suffix slots. Supports text, number, email, and password types.

## Usage

```html theme={null}
<juo-input placeholder="Label">Input</juo-input>
```

## Reference

### Parameters

<ParamField path="variant" type="attr · default | embedded | null" default="default" />

<ParamField path="size" type="attr · md | sm | lg | xl | null" default="md" />

<ParamField path="type" type="prop · InputTypeHTMLAttribute" default="text" />

<ParamField path="placeholder" type="attr · string" />

<ParamField path="error" type="attr · boolean" default="false" />

<ParamField path="error-message" type="attr · string" />

<ParamField path="disabled" type="attr · boolean" default="false" />

<ParamField path="suffix" type="attr · string" />

<ParamField path="value" type="prop · string | number" required />

### Events

The element dispatches native [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent)s; the payload is in `event.detail`.

<ResponseField name="change" type="CustomEvent">
  `event.detail`: `[value: string | number]`
</ResponseField>

### Slots

<ResponseField name="icon" type="slot" />
