formsinput

Input

Text input component with icon slots, loading state, and form field integration.

Import#

import { Input } from 'moraine'

Slot Structure#

Text input shell with optional leading and trailing icon slots.

root
├── leading (optional)
├── input
└── trailing (optional)

Examples#

Variants#

Visual style variants.

1
function InputVariants() {
2
  const VARIANTS = ['outline', 'subtle', 'ghost', 'none'] as const
3

4
  return (
5
    <div class="gap-3 grid lg:grid-cols-3 sm:grid-cols-2">
6
      <For each={VARIANTS}>{(variant) => <Input variant={variant} placeholder={variant} />}</For>
7
    </div>
8
  )
9
}

Sizes#

From xs to xl.

1
function InputSizes() {
2
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const
3

4
  return (
5
    <div class="gap-3 grid lg:grid-cols-3 sm:grid-cols-2">
6
      <For each={SIZES}>{(size) => <Input size={size} placeholder={`Size: ${size}`} />}</For>
7
    </div>
8
  )
9
}

With Icons#

Leading and trailing icon slots.

1
function InputWithIcons() {
2
  return (
3
    <div class="gap-3 grid sm:grid-cols-2">
4
      <Input
5
        leading="i-lucide-search"
6
        placeholder="Search..."
7
        classes={{ leading: 'bg-muted p-3' }}
8
      />
9
      <Input leading="i-lucide-mail" trailing="i-lucide-check" placeholder="Email" />
10
      <Input
11
        trailing={<span class="text-xs text-muted-foreground/80">.com</span>}
12
        placeholder="Domain"
13
      />
14
      <Input
15
        leading={
16
          <div class="text-muted-foreground flex gap-1 items-center">
17
            <Icon name="i-lucide-globe" />
18
            https://
19
          </div>
20
        }
21
        placeholder="website.com"
22
        classes={{
23
          input: 'ps-0',
24
        }}
25
      />
26
    </div>
27
  )
28
}

States#

Loading, disabled, and type.

1
function InputStates() {
2
  return (
3
    <div class="gap-3 grid sm:grid-cols-2">
4
      <Input loading placeholder="Loading..." />
5
      <Input disabled placeholder="Disabled" value="Cannot edit" />
6
      <Input type="file" />
7
      <Input type="datetime-local" />
8
    </div>
9
  )
10
}

API Reference#

Attributes#

Slotroot0 attributes

Input wrapper that positions icons, loading state, and the native input.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
autocomplete	`JSX.InputHTMLAttributes<HTMLInputElement>["autocomplete"] \| undefined`	`off`	The autocomplete attribute for the input.
autofocus	`boolean \| undefined`	`false`	Whether the input should automatically receive focus on mount.
autofocusDelay	`number \| undefined`	`0`	The delay in milliseconds before automatically focusing the input.
children	`JSX.Element`	—	Additional content to render inside the input container.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`InputT.Classes \| undefined`	—	—
defaultValue	`InputT.Value`	—	The default value of the input (uncontrolled).
disabled	`boolean \| undefined`	`false`	Whether the input is disabled.
id	`string \| undefined`	—	The ID of the input element.
leading	`IconT.Name`	—	Leading icon name.
loading	`boolean \| undefined`	`false`	Whether the input is in a loading state.
loadingIcon	`IconT.Name`	`icon-loading`	The icon to show when the input is in a loading state.
maxLength	`string \| number \| undefined`	—	The maximum number of characters allowed in the input.
modelModifiers	`M \| undefined`	—	Modifiers for the input value (e.g., trim, lazy, number).
name	`string \| undefined`	—	The name of the input element, used for form submission.
onBlur	`JSX.FocusEventHandlerUnion<HTMLInputElement, FocusEvent> \| undefined`	—	Event handler for the blur event.
onChange	`((value: ModifierValue<M>) => void) \| undefined`	—	Callback when the input value change is committed.
onFocus	`JSX.FocusEventHandlerUnion<HTMLInputElement, FocusEvent> \| undefined`	—	Event handler for the focus event.
onInput	`JSX.InputEventHandlerUnion<HTMLInputElement, InputEvent> \| undefined`	—	Event handler for the input event.
onValueChange	`((value: ModifierValue<M>) => void) \| undefined`	—	Callback when the input value changes during input.
placeholder	`string \| undefined`	—	The placeholder text for the input.
readOnly	`boolean \| undefined`	`false`	Whether the input is read-only.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
required	`boolean \| undefined`	`false`	Whether the input is required.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`InputT.Styles \| undefined`	—	—
trailing	`IconT.Name`	—	Trailing icon name.
type	`JSX.InputHTMLAttributes<HTMLInputElement>["type"] \| undefined`	`text`	The type of the input element.
value	`InputT.Value`	—	The current value of the input (controlled).
variant	`"none" \| "outline" \| "ghost" \| "subtle" \| undefined`	—	—