Skip to content
LuoForge/Tungsten
Components/Input·

Input

since v0.1.0

Single-line text field — use for all form data entry outside of multi-line content.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { Input } from '@hey-mike/tungsten';
import { Input } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/input/page.tsx

import { Input } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function InputSnapshot() {
  return (
    <VariantGrid
      title="Input"
      variants={[
        { label: 'empty', node: <Input placeholder="Type something…" /> },
        { label: 'filled', node: <Input defaultValue="Hello world" /> },
        { label: 'disabled', node: <Input defaultValue="Disabled value" disabled /> },
        { label: 'readonly', node: <Input defaultValue="Read-only value" readOnly /> },
      ]}
    />
  );
}

import { Input } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function InputSnapshot() {
  return (
    <VariantGrid
      title="Input"
      variants={[
        { label: 'empty', node: <Input placeholder="Type something…" /> },
        { label: 'filled', node: <Input defaultValue="Hello world" /> },
        { label: 'disabled', node: <Input defaultValue="Disabled value" disabled /> },
        { label: 'readonly', node: <Input defaultValue="Read-only value" readOnly /> },
      ]}
    />
  );
}

Props

Surface specific to <Input />.

PropTypeDefaultDescription
labelstring—Inline label. Omit when wrapping in a <FormField>.
errorstring—Error message; switches focus voltage to error palette.
hintstring—Help text shown below the input. Suppressed when error is set.
type"number" | "text" | "email" | "password" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "month" | "week"—HTML input type. type="checkbox" is intentionally excluded.

Used in recipes

Compositions from the /recipes reference that use this component.

Source