Skip to main content

<div style="width:240px; font-family:sans-serif;">
  <juo-input placeholder="Label"></juo-input>
</div>
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

<juo-input placeholder="Label">Input</juo-input>

​
Reference

​
Parameters

​
variant
attr · default | embedded | null
default:"default"
​
size
attr · md | sm | lg | xl | null
default:"md"
​
type
prop · InputTypeHTMLAttribute
default:"text"
​
placeholder
attr · string
​
error
attr · boolean
default:"false"
​
error-message
attr · string
​
disabled
attr · boolean
default:"false"
​
suffix
attr · string
​
value
prop · string | number
required

​
Events

The element dispatches native CustomEvents; the payload is in event.detail.
​
change
CustomEvent
event.detail: [value: string | number]

​
Slots

​
icon
slot