Components

Input

Single-line text field for typed user input. Flat border (no shadow) and Yuno focus ring.

Updated Jul 8, 2026 by Leonardo Posada

Text field

<div className="grid gap-1.5 w-full max-w-sm">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@yuno.tools" />
</div>

States

<Input placeholder="Disabled" disabled />
<Input
  placeholder="Invalid amount"
  className="border-destructive focus-visible:ring-destructive/30"
/>

When to use

  • Short single-line entries: email, name, amount, search term.
  • Inside a form, always paired with an explicit Label.

When not to use

  • Long text — use Textarea.
  • Choice from a fixed list — use Select or Combobox.
  • Toggles or booleans — use Switch or Checkbox.

Usage

Do
  • Always pair with a <Label htmlFor='id'> for accessibility.
  • Use placeholder for a hint of the expected format, never as a label replacement.
  • For errors, add border-destructive + a small helper text below.
  • Set the correct type: email, tel, url, number, so mobile keyboards work.
Don't
  • Never apply drop shadows on inputs — only border.
  • Don't use placeholder as the field label.
  • Don't disable an input silently without visual + textual explanation.