Input

Collect a single line of text, such as a name or email address.

On this page

Installation

Install component source from the public registry, or use the local workspace package. Follow the setup guide first. The npm package is not published yet.

View registry files

Built with

Implemented with React and browser APIs, without an additional behavior or rendering library.

Shared foundation: React, clsx for conditional classes, tailwind-merge for resolving utility-class conflicts. Styles use Tailwind CSS and Dethink CSS variables.

Based on this component’s source and registry composition. Libraries used only in showcase examples are excluded.

Usage

Import the component into your page or component file.

Usage

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

export function Example() {
  return (
    <div>
      <label htmlFor="email">Email</label>
      <Input id="email" name="email" type="email" autoComplete="email" />
    </div>
  );
}

Examples

Try the examples, then open the code to use them in your app.

Basic

Give every input a visible label. Use aria-describedby to connect any help text.

We only use this for account notifications.

Show sourceexamples/input/basic.tsx

examples/input/basic.tsx

"use client";

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

export function InputBasic() {
  return (
    <div className="w-full max-w-sm space-y-1.5">
      <label htmlFor="basic-email" className="text-sm font-medium">
        Email
      </label>
      <Input
        id="basic-email"
        type="email"
        placeholder="you@company.com"
        autoComplete="email"
      />
      <p className="text-muted-foreground text-xs">
        We only use this for account notifications.
      </p>
    </div>
  );
}

Sizes

Use controlSize to choose sm, md, or lg. The default size matches nearby buttons.

Show sourceexamples/input/sizes.tsx

examples/input/sizes.tsx

"use client";

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

export function InputSizes() {
  return (
    <div className="w-full max-w-sm space-y-3">
      <Input
        controlSize="sm"
        placeholder='controlSize="sm"'
        aria-label="Small input"
      />
      <Input
        controlSize="md"
        placeholder='controlSize="md"'
        aria-label="Medium input"
      />
      <Input
        controlSize="lg"
        placeholder='controlSize="lg"'
        aria-label="Large input"
      />
    </div>
  );
}

States

Use invalid for an error, disabled to block interaction, or readOnly to prevent editing while allowing text selection.

Workspace URL

Only lowercase letters and hyphens are allowed.

Show sourceexamples/input/states.tsx

examples/input/states.tsx

"use client";

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

export function InputStates() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="space-y-1.5">
        <label htmlFor="state-invalid" className="text-sm font-medium">
          Workspace URL
        </label>
        <Input
          id="state-invalid"
          defaultValue="dethink components!"
          invalid
          aria-describedby="state-invalid-hint"
        />
        <p id="state-invalid-hint" className="text-destructive text-xs">
          Only lowercase letters and hyphens are allowed.
        </p>
      </div>
      <Input disabled placeholder="Disabled" aria-label="Disabled input" />
      <Input
        readOnly
        defaultValue="team_7f2a91"
        aria-label="Workspace ID (read-only)"
      />
    </div>
  );
}

In a form

Place an input and button together for a short form. Their default heights match.

Show sourceexamples/input/form.tsx

examples/input/form.tsx

"use client";

import { useState } from "react";
import { Button, Input } from "@dethink/components";

export function InputForm() {
  const [subscribed, setSubscribed] = useState(false);

  return (
    <form
      className="flex w-full max-w-md items-end gap-2"
      onSubmit={(event) => {
        event.preventDefault();
        setSubscribed(true);
      }}
    >
      <div className="flex-1 space-y-1.5">
        <label htmlFor="newsletter-email" className="text-sm font-medium">
          Get release notes
        </label>
        <Input
          id="newsletter-email"
          type="email"
          required
          placeholder="you@company.com"
        />
      </div>
      <Button type="submit" variant={subscribed ? "soft" : "solid"}>
        {subscribed ? "Subscribed ✓" : "Subscribe"}
      </Button>
    </form>
  );
}

Props

Also accepts standard input props, such as value, onChange, placeholder, and autoComplete.

Input props
Prop	What it does	Default
`controlSize"sm" \| "md" \| "lg"`	Sets the field height and padding. The "md" size follows the app density setting.	`"md"`
`invalidboolean`	Shows an error border and marks the field as invalid for screen readers.	`false`
`disabledboolean`	Disables the field and lowers its opacity.	`false`
`readOnlyboolean`	Lets users read and select the text, but prevents editing.	`false`
`requiredboolean`	Requires a value before the browser submits the form.	`false`
`…InputHTMLAttributesInputHTMLAttributes<HTMLInputElement>`	All native input props pass through: type, placeholder, value, onChange, autoComplete, and so on.	Not set