Input

A standard text input component for user-provided data entry.

Overview

Default

<Input type="text" placeholder="Enter text..." value="" onChange={() => {}} />

With Label

<div className="space-y-1">
  <label htmlFor="with-label" className="text-sand-12 block text-sm font-medium">
    Email
  </label>
  <Input id="with-label" type="email" placeholder="[email protected]" />
</div>

Variants

Default

<Input variant="default" placeholder="Default variant..." />

Blue

<Input variant="blue" placeholder="Blue variant..." />

Inline Variant

<Input variant="inline" placeholder="Inline variant..." />

Ghost Variant

<Input variant="ghost" placeholder="Ghost variant..." />

Dimensions

Default

<Input dimensions="default" placeholder="Default size..." />

Medium (M)

<Input dimensions="M" placeholder="Medium size..." />

Small (S)

<Input dimensions="S" placeholder="Small size..." />

Shapes

Default

<Input shape="default" placeholder="Default shape..." />

Rounded

<Input shape="rounded" placeholder="Rounded shape..." />

None

<Input shape="none" placeholder="No shape..." />

States

Disabled

<Input disabled={true} placeholder="Disabled input..." />

With Shadow

<Input shadow={true} placeholder="Input with shadow..." />