Components
Input
Displays a form input field or a component that looks like an input field. Use it for short, single-line text entry.
Preview
Rendered with live Folio tokens -- the surface, border, and focus ring remap on theme change, no dark: classes.
States
<Input placeholder="Enter text" /><Input disabled placeholder="Enter text" /><Input aria-invalid defaultValue="Not an email" /><Input type="file" />Invalid styling is driven by the native aria-invalid attribute -- no separate prop -- so it stays in sync with form validation and screen readers.
With a label
We'll never share your email.
<div className="flex flex-col gap-2">
<label htmlFor="email" className="text-label">
Email
</label>
<Input id="email" type="email" placeholder="derek.ho@distyl.ai" />
<p className="text-description">We'll never share your email.</p>
</div>Always tie the label to the input with htmlFor / id so clicking the label focuses the field.
API
Prop
Type
Default
Description
size
"default" | "sm"
"default"
Height -- default is 36px (h-9), sm is 32px (h-8).
type
string
"text"
Native input type -- text, email, password, number.
placeholder
string
undefined
Hint shown while the field is empty.
value / defaultValue
string
undefined
Controlled / uncontrolled value.
disabled
boolean
false
Dims and blocks input.
...props
InputHTMLAttributes
—
All native input attributes pass through.
Don't and Do
Don't
Don't use an Input as a read-only label or hardcode border-gray-300 / bg-white on it -- that breaks dark mode and the rebrand.
Do
// Pair the Input with a <label> tied via htmlFor/id
<label htmlFor="name">Name</label>
<Input id="name" placeholder="Derek Ho" />import { Input } from "@/components/shadcn/input";
export function EmailField() {
return <Input type="email" placeholder="derek.ho@distyl.ai" />;
}Drop-in ready. The field spreads all native input props (type, value, onChange, …) and the Folio tokens are baked in.