Input
Text input with label + hint + error + leading/trailing icons. Sizes line up with Button heights so controls align in horizontal toolbars.
Source
src/components/ui/input.tsxLabel, hint, and required
Label uses monospace uppercase small-caps styling. The required asterisk is decorative — screen readers pick up the required attribute.
Lowercase letters, numbers, and dashes.
Validation states
error paints the border red and surfaces the message. success is a quiet green for inline validation cues (e.g. handle available).
Enter a valid email address.
Available.
Sizes
sm / md / lg — heights match the Button primitive for clean toolbar alignment.
With icons
leadingIcon and trailingIcon are rendered inside the field — pass any lucide-react icon.
Disabled
Disabled wrappers drop opacity and block pointer events on the entire stack.
Slugs can't be edited once set.