Saturday
ComponentsInput Field

Input Field

Standard text input for most free-form entries with optional left or right icon, size and state controls, and implementation-ready code previews.

Normal field

Standard text input for most free-form entries with optional left or right icon.

Size
State
Icon
Code preview
import React from "react";
import { Mail } from "lucide-react";

Field specs

Reference values for text, placeholder, input fill, stroke, and state-specific colors.

TokenValueColorUsage
Input fill
var(--input-input-fill)#fcfcfcDefault field background
Stroke default
var(--input-input-stroke-default)#8f9da4Default / resting border
Stroke active
var(--input-input-stroke-active)#765cd8Focus highlight
Stroke error
var(--red-600)#c8342aError border and icon
Placeholder
var(--text-text-placeholder)#b3bbc0Hint text in empty fields