Size
State
Code preview
import React from "react";
import { ChevronDown, Search } from "lucide-react";Selection input with a trailing chevron for controlled option lists, with size, state, and token reference specs.
Selection input with a trailing chevron for controlled option lists.
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 |