Input

Text input with variants, sizes, label, hint, and error states.

Formsforminteractivetext

Workbench

Rendering Input…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add input

Usage

TSX

import { Input } from "@/components/ui/input";

export default function Example() {
  return <Input label="Email" type="email" placeholder="you@company.com" hint="We never share it." />;
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

Examples

With an error

The message names the fix, and is tied to the field so a screen reader reads it with the label.

Rendering With an error…

With an icon or a prefix

The text starts after whatever sits beside it, however wide it is.

Rendering With an icon or a prefix…

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

HTML

<div class="ml-input-field">
  <label class="ml-input-label" id="input-1-label" for="input-1">Email</label>
  <div class="ml-input-control">
    <input class="ml-input" id="input-1" aria-describedby="input-1-hint" data-variant="default" data-size="md" type="email" placeholder="you@company.com"/>
  </div>
  <p class="ml-input-hint" id="input-1-hint">We never share it.</p>
</div>

Options

Prop	Values	Default
`size`	`smmdlg`	`md`
`variant`	`defaultfilledsubtle`	`default`

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-input-field`	`data-invalid`
`ml-input`	`aria-invalid="true"data-invaliddata-size="lg \| sm"data-variant="filled \| subtle"`
`ml-textarea`	—
`ml-input-control`	`data-leadingdata-trailing`
`ml-input-trailing`	—
`ml-input-label`	—
`ml-input-hint`	—
`ml-input-error`	—
`ml-input-leading`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Open the standalone preview