Component

Input

A text input built on the native input element, with consistent styling and focus states.

Preview

Rendered from Storybook stories

Default

Filled

Disabled

Code

input.tsx

import * as React from "react";

type InputProps = React.InputHTMLAttributes<HTMLInputElement>;

export function Input({ className = "", ...props }: InputProps) {
  return (
    <input
      className={[
        "flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors",
        "bg-white text-zinc-900 placeholder:text-zinc-400",
        "dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500",
        "border-zinc-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-indigo-500",
        "dark:border-zinc-700 dark:focus-visible:ring-indigo-400",
        "disabled:cursor-not-allowed disabled:opacity-50",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      {...props}
    />
  );
}

Tests

input.test.tsxPassed

Ran at build time

  ✓ Input renders an input element 173ms
  ✓ Input renders with a placeholder 4ms
  ✓ Input renders with a default value 4ms
  ✓ Input accepts typed input 86ms
  ✓ Input calls onChange when the value changes 22ms
  ✓ Input is disabled when the disabled prop is set 9ms
  ✓ Input dark mode applies dark mode styles 9ms
  ✓ Input dark mode applies dark mode focus ring styles 10ms
  ✓ Input dark mode applies dark mode placeholder styles 9ms
  ✓ Input dark mode respects disabled opacity in dark mode 17ms
  Tests  10 passed (10)