Delphi Design

A versatile text input component with multiple variants, dimensions, and shapes.

Basic

Default

With Label

Variants

Default

Blue

Inline

Ghost

Dimensions

Default

Medium (M)

Small (S)

Shapes

Default

Rounded

None

States

Disabled

With Shadow

Read Only

With Value

Input Types

Password

Number

URL

Usage

import { Input } from "@delphi/ui";

export function Example() {
  return (
    <Input
      type="text"
      placeholder="Enter text..."
    />
  );
}

With Label

import { Input, Label } from "@delphi/ui";

export function LabelExample() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input
        id="email"
        type="email"
        placeholder="[email protected]"
      />
    </div>
  );
}

Controlled Input

import { useState } from "react";
import { Input } from "@delphi/ui";

export function ControlledExample() {
  const [value, setValue] = useState("");

  return (
    <Input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Controlled input..."
    />
  );
}

API Reference

Prop	Type	Default	Description
`variant`	`"default" \| "blue" \| "inline" \| "ghost"`	`"default"`	Visual style variant
`dimensions`	`"default" \| "M" \| "S"`	`"default"`	Input size
`shape`	`"default" \| "rounded" \| "none"`	`"default"`	Border radius style
`shadow`	`boolean`	`false`	Whether to show shadow
`disabled`	`boolean`	`false`	Disables the input
`readOnly`	`boolean`	`false`	Makes the input read-only
`type`	`string`	`"text"`	HTML input type
`placeholder`	`string`	-	Placeholder text

Always associate inputs with labels using htmlFor and id

Use appropriate input types (email, tel, url) for mobile keyboard optimization

Provide clear placeholder text that shows expected format

Show validation errors inline, near the input field

Support autofill by using standard name attributes

Use aria-describedby to link inputs with error or help text

Use placeholder text as a replacement for labels

Disable paste on password fields — it breaks password managers

Clear input fields on validation error — preserve user input

Use type="number" for phone numbers or credit cards