Cognition

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 Cognition 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-sm font-medium text-text-default">
    Email
  </label>
  <Input id="email" type="email" placeholder="derek.ho@distyl.ai" />
  <p className="text-sm text-text-subtle">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
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/ui/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 Cognition tokens are baked in.

API matches fe-distillery/components/ui/input.tsx — a single Input that forwards its ref and spreads React.ComponentProps<"input">. The raw Tailwind utilities are replaced with Cognition tokens.