# Input

Labelled text field that lights up on focus, draws a check when you mark the value as good, and gives one quick flicker on error. Supports helper text, icons and a fill-as-you-type underline.

> Primitive · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add input
```

## Import

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

## Variants

- `checkout` — Shipping: `npx @lumioui/cli add input-checkout`
- `glass` — Glass: `npx @lumioui/cli add input-glass`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `string` | Visible label above the field. |
| `helper?` | `string` | Helper text below the field. |
| `error?` | `string` | Error message — turns the field red, flickers it, and announces to screen readers. |
| `success?` | `boolean` | Shows an animated success check on the right edge. |
| `leftIcon?` | `React.ReactNode` | Icon node rendered inside the left edge of the field. |
| `rightIcon?` | `React.ReactNode` | Icon node rendered inside the right edge (hidden while the success check shows). |
| `reserveHelperLine?` | `boolean` | Reserve one helper line even when empty — prevents layout shift on error. |
| `size?` | `"sm" | "md"` | Field density — "sm" for toolbars and dense forms, "md" (default) for  full-size fields. |
| `className?` | `string` | NativeWind classes for the input element. |
| `containerClassName?` | `string` | Classes for the outer wrapper. |
| `glass?` | `boolean` | Glass field — capsule material instead of the flat fill. |
| `validity?` | `number` | 0–1: how close the value is to valid (e.g. postcode chars / 6). Shows a  2px baseline under the text that charges as you type; omit for none. |

Source: https://lumioui.com/components/input