Form

Input

Styled text input for forms and search with optional icon or button addons and variant support.

Overview

The Input component provides a styled text field for forms and search. It supports optional addons (icons or buttons) on the left or right via slots, outline and other variants, and integrates with Field for labels and validation.

Key Business & UX Benefits

Consistent look and behavior for text fields across the app.
Addon slots support search icons, clear buttons, and custom actions.
Works with Field for labels and errors so forms stay accessible.
Outline and other variants fit different layouts and emphasis.

Pro-Tip from Larry: Use addon slots for search icon and clear button so the input is self-contained.

Usage

Regular Input

Input

<Input placeholder="Optional placeholder" />

Input with Addons

LuiInputGroup

<Input placeholder="Input placeholder">
  <template #addon-left>
    <InputGroupAddon>
      <Icon name="actions/zoom-out" />
    </InputGroupAddon>
  </template>
  <template #addon-right>
    <InputGroupButton>
      <Icon name="actions/zoom-in" />
    </InputGroupButton>
  </template>
</Input>

Feature List

Styled text input with outline and other variants
Optional addon slots for icons or buttons left and right
Integration with Field for label and error display
Placeholder and disabled state support

API Reference

Input

Prop	Default	Type
`name`		`string`
`type`	`text`	`string`
`modelValue`		`string`
`placeholder`		`string`
`disabled`	`false`	`boolean`
`readonly`	`false`	`boolean`
`required`	`false`	`boolean`
`id`		`string`
`isError`	`false`	`boolean`
`variant`	`outline`	`"subtle" \| "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`	`{}`

Edit this pageorReport an issue

Field

Form field wrapper providing label, help text, and validation message around an input control.

Input Checkbox

A control that allows the user to toggle between checked and not checked.