Size
State
Icon
Code preview
import React from "react";
import { ChevronDown, Search } from "lucide-react";Standard text input for most free-form entries with optional left or right icon, size and state controls, and implementation-ready code previews.
Standard text input for most free-form entries with optional left or right icon.
import React from "react";
import { ChevronDown, Search } from "lucide-react";Reference values for text, placeholder, input fill, stroke, and state-specific colors.
| Token | Value | Color | Usage |
|---|---|---|---|
| Input fill | var(--input-input-fill) | #fcfcfc | Default field background |
| Stroke default | var(--input-input-stroke-default) | #8f9da4 | Default / resting border |
| Stroke active | var(--input-input-stroke-active) | #765cd8 | Focus highlight |
| Stroke error | var(--red-600) | #c8342a | Error border and icon |
| Placeholder | var(--text-text-placeholder) | #b3bbc0 | Hint text in empty fields |