Input

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

On this page

Installation

Use this component from the local workspace package. Follow the setup guide first. A public npm package and registry are not available yet.

View registry files

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