Input
Input lets people enter and edit a single line of text.
Input has Field built in: label, required marker, hint and validation message. On focus, a brand-colored bar grows from the middle of the bottom edge.
We'll send a verification link to this address.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Input } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Appearance
outline (default), underline, filled-darker, filled-lighter.
Password must be at least 8 characters.
This username is available.
Validation
validationState + validationMessage. An error should always say how to fix it.
@company.com
Content before / after
An icon or unit inside the input.
Size & disabled
small (24px), medium (32px), large (40px).
Usage
Do
- Always show a visible label.
- Use hint for the expected format (e.g. DD/MM/YYYY).
- Mark required fields with required.
Don't
- Don't use a placeholder in place of a label.
- Don't show vague errors such as “Invalid”.
Props
| Prop · Type | Default | Description |
|---|---|---|
| labelReactNode | Default: — | Label linked to the input through htmlFor. |
| appearance"outline" | "underline" | "filled-darker" | "filled-lighter" | "glass" | Default: "outline" | Input style. glass (Yugen Labs): a rounded field inside a glass bar. |
| size"small" | "medium" | "large" | Default: "medium" | Height 24 / 32 / 40px. |
| validationState"none" | "error" | "warning" | "success" | Default: "none" | Validation state. |
| validationMessageReactNode | Default: — | Message shown with validationState. |
| hintReactNode | Default: — | Hint below the input. |
| contentBefore / contentAfterReactNode | Default: — | Content inside the input, before or after the text. |
| rootClassNamestring | Default: — | Class for the outer Field wrapper (set the width here). |