// Generated by scripts/generate-showcase.mjs. Do not edit directly. page InputDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_id = ctx.url.searchParams.get("pg_id") ?? "input-1" state playground_name = ctx.url.searchParams.get("pg_name") ?? "inputField" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Email address" state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter input" state playground_value = ctx.url.searchParams.get("pg_value") ?? "" state playground_type = ctx.url.searchParams.get("pg_type") ?? "email" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field." state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false" state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "email" state playground_inputmode = ctx.url.searchParams.get("pg_inputmode") ?? "" state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? "" state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? "" state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "" state playground_min = ctx.url.searchParams.get("pg_min") ?? "" state playground_max = ctx.url.searchParams.get("pg_max") ?? "" state playground_step = ctx.url.searchParams.get("pg_step") ?? "" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Input" description = "Theme-aware, responsive input component." } view {
Forms component

Input

Theme-aware, responsive input component.

28 props0 slots7 eventsTheme readyResponsive
Interactive playground

Configure Input

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Input
  id="input-1"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  helperText="Helpful context for this field."
  autocomplete="email"
/>
Component props28 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default field

Use a labelled field with a value, placeholder, and supporting helper text.

01
Live preview
Component usage.wrn
<Input
  id="input-1"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  helperText="Helpful context for this field."
  autocomplete="email"
/>
Appearance

Outlined with start icon

Combine an outlined treatment with a leading icon.

02
Live preview
Component usage.wrn
<Input
  id="input-2"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  variant="outlined"
  icon="icon-[lucide--sparkles]"
  autocomplete="email"
/>
Appearance

Floating label

Move the label into the control while preserving an accessible field name.

03
Live preview
Component usage.wrn
<Input
  id="input-3"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  variant="floating"
  icon="icon-[lucide--circle-user-round]"
  iconPosition="end"
  autocomplete="email"
/>
Appearance

Pill and compact size

Use pill styling and compact sizing in dense interfaces.

04
Live preview
Component usage.wrn
<Input
  size="sm"
  id="input-4"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  variant="pill"
  autocomplete="email"
/>
States

Read only

Display a submitted value without allowing it to be changed.

05
Live preview
Component usage.wrn
<Input
  id="input-5"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  value="readonly@example.com"
  type="email"
  readonly="true"
  autocomplete="email"
/>
States

Disabled

Prevent interaction and communicate that the field is unavailable.

06
Live preview
Component usage.wrn
<Input
  id="input-6"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  disabled="true"
  autocomplete="email"
/>
Layout

Inline helper text

Place the label, control, and supporting text on one responsive line.

07
Live preview
Component usage.wrn
<Input
  id="input-7"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  helperText="We'll never share your details."
  inline="true"
  autocomplete="email"
/>
Layout

Field with corner hint

Place optional context opposite the label and keep the control on the next line.

08
Live preview
Component usage.wrn
<Input
  id="input-8"
  name="inputField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  cornerHint="Optional"
  autocomplete="email"
/>
Validation

Validated field

Surface validation through @wrnexus/validation-compatible error targets and accessible state.

09
Live preview
Component usage.wrn
<Input
  id="input-9"
  name="validatedField"
  label="Email address"
  placeholder="Enter input"
  type="email"
  required="true"
  autocomplete="email"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@inputFires immediately as the component value changes.
@changeFires when the component value or selection changes.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
@invalidFires when the component emits the invalid event.
@keydownFires when the component emits the keydown event.
@keyupFires when the component emits the keyup event.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
idstring""No
namestring""No
labelstring"Input"No
hiddenLabelbooleanfalseNo
placeholderstring""No
valuestring""No
typestring"text"No
variantstring"normal"No
iconstring""No
iconPositionstring"start"No
helperTextstring""No
cornerHintstring""No
errorstring""No
inlinebooleanfalseNo
readonlybooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
autocompletestring""No
inputmodestring""No
minlengthstring""No
maxlengthstring""No
patternstring""No
minstring""No
maxstring""No
stepstring""No
classstring""No
} }