ComponentsDropdown

Dropdown

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.

Size

State

Disabled

Code preview

import React from "react";
import { ChevronDown } 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