Form

Input

Styled text field with optional icon or button addons and Field integration for labels and errors.

Loading playground

Overview

Input is the styled text field for forms and search. It accepts optional addons (icons or buttons) on either side via slots, and several visual variants.

Wrap an Input in <LField> and pass errorMessage on the Field. The Field's errorMessage automatically derives invalid on the Input, so you rarely need to set invalid directly.

For composed groups (currency symbols, action buttons), use InputGroup with InputGroupAddon and InputGroupButton.

Variants

The variant prop chooses the field chrome:

`variant`	When to use
`'outline'`	Default. Bordered field for standalone forms.
`'subtle'`	Low-emphasis field that leans on a filled background instead of a border.
`'plain'`	For fields sitting on an already-styled surface — they shouldn't carry their own box.

The plain variant paints its resting, hover, focus, disabled, and error backgrounds and borders from the --input-field-plain-* design tokens, so a theme can recolor it without overriding component styles.

Key Business & UX Benefits

One text-field primitive powers every form on the site, so account, checkout, and search inputs share the exact same look, feel, and error behaviour.
Addon slots cover currency, units, and inline action buttons without nesting hacks, so teams can launch new pricing or search experiences quickly.
Field-driven invalid state means a single source of truth for validation, reducing the chance that an error message and a field's styling get out of sync mid-flow.
Consistent focus and error styling matches assistive-tech expectations, supporting accessibility compliance and reducing form abandonment from confused users.

Pro-Tip from Larry: Wrap inputs in <LField> and pass errorMessage; invalid is derived automatically.

Input with Addons

LInputGroup

<LInput placeholder="Input placeholder">
  <template #addon-left>
    <LInputGroupAddon>
      <LIcon name="actions/zoom-out" />
    </LInputGroupAddon>
  </template>
  <template #addon-right>
    <LInputGroupButton>
      <LIcon name="actions/zoom-in" />
    </LInputGroupButton>
  </template>
</LInput>

Invalid State

<LInput :invalid="hasError" placeholder="Email" />

Feature List

Two slot addons (`#addon-left`, `#addon-right`) accept `InputGroupAddon` and `InputGroupButton` for currency, units, and inline actions
Auto-derives `invalid` from `<LField>`'s `errorMessage`, so callers rarely set `invalid` directly
Inherits `id`, `disabled`, `readonly`, `required`, and `errorMessage` from the surrounding `<LField>` context
Single primitive shared by account, checkout, and search inputs, so error and focus chrome stay consistent storefront-wide
Pair with `InputGroup` plus `InputGroupAddon`/`InputGroupButton` when composed groups need flush-mounted decoration

Input

Prop	Default	Type
`name`		`string`
`type`	`text`	`string`
`modelValue`		`string`
`placeholder`		`string`
`disabled`	`false`	`boolean`
`readonly`	`false`	`boolean`
`required`	`false`	`boolean`
`id`		`string`
`invalid`	`false`	`boolean`
`variant`	`outline`	`"subtle" \| "plain" \| "outline"`
`maxLength`		`number`
`wrapperClass`		`string`

Slot	Type
`addon-left`	`{}`
`addon-right`	`{}`

Event	Type
`focus`	`(event: "focus", event: Event): void`
`update:modelValue`	`(event: "update:modelValue", value: string \| undefined): void`

InputGroupAddon

Slot	Type
`default`	`{}`

InputGroupButton

Prop	Default	Type
`label`required		`string`
`disabled`		`boolean`

Slot	Type
`default`	`{}`

Changelog

v2.4.0Added

A plain variant joins outline (default) and subtle. It paints resting, hover, focus, disabled, and error backgrounds/borders from the --input-field-plain-* tokens, for inputs that sit on an already-styled surface.

Edit this pageorReport an issue

Field

Form field wrapper that adds label, description, and error message around any input control.

Label

Form label with an optional required indicator, accessibly linked to its control.