Atoms / Input

Input

<Input />Stable

Text field for short-form input. Re-exports shadcn's Input; brand identity flows through tokens (--input, --ring, --destructive).

import { Input } from "@/components/upnext";

Explorer

Cross state × type × addon shape. Hover any field with inspect mode on to see its tokens.

State

Type

Addon

<Input type="text" placeholder="Marcus Reed" />

Inspector

The single-input playground with token resolution per prop.

Preview

Code

import { Input } from "@/components/upnext";


<Input />

States

Input has no variants — its visual personality lives in interaction states. Each tab demonstrates one state with its source.

import { Input } from "@/components/upnext";


export function Example() {
  return <Input placeholder="you@company.com" />;
}

Composition

Patterns built from Input plus other primitives — labels, helper text, inline icons, error messages.

import { Input, Field, FieldLabel } from "@/components/upnext";


export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="recruit@upnext.com" />
    </Field>
  );
}

Source

The wrapper is a thin re-export; the actual styling lives in components/ui/input.tsx (the shadcn primitive).