Input

Installation

$ npx shadcn@latest add https://goodui.dev/r/input.json

The file lands in components/goodui/input.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/input works too.

Usage

import * as React from "react"
import { Mail } from "lucide-react"
import { Input } from "@/components/goodui/input"

export function InviteField() {
  const [email, setEmail] = React.useState("")
  const [error, setError] = React.useState("")
  const [attempt, setAttempt] = React.useState(0)

  const submit = (e: React.FormEvent) => {
    e.preventDefault()
    setAttempt((n) => n + 1)
    setError(email.includes("@") ? "" : "Enter a valid work email.")
  }

  return (
    <form onSubmit={submit} className="flex max-w-sm flex-col gap-3">
      <Input
        type="email"
        label="Invite a teammate"
        description="They get an email with a link to join your studio."
        placeholder="name@studio.com"
        leading={<Mail />}
        clearable
        value={email}
        onValueChange={setEmail}
        state={error ? "error" : "default"}
        message={error}
        shakeKey={attempt}
      />
      <button type="submit" className="self-start text-sm font-medium underline">
        Send invite
      </button>
    </form>
  )
}

When to use

Examples

<Input labelMode="floating" label="Business name" defaultValue="Glow Studio" />

<Input label="Booking page" addonBefore="https://" addonAfter=".goodui.app" placeholder="glow-studio" />
<Input label="Deposit" leading="$" trailing="USD" inputMode="decimal" placeholder="50.00" />

<Input multiline autoResize rows={2} label="Note for the client" maxLength={280} showCount placeholder="Please arrive 10 minutes early." />

API reference

Accessibility

• •Renders a real <input> or <textarea> with a <label htmlFor>; the id is generated with useId unless you pass one.
• •labelMode="none" keeps the label for screen readers: a string label becomes aria-label, any other node becomes an sr-only <label>.
• •state="error" sets aria-invalid. The description or message is linked with aria-describedby and sits in an aria-live="polite" region, so new errors are announced.
• •The clear button has aria-label "Clear" (labels.clear) and returns focus to the field.
• •Error and success also show an icon, so the state does not rely on color alone.

Motion

• •Focus: ring adds a 3px tone-colored ring in 200 ms (default), glow adds a soft bloom in 300 ms, lift raises the field 2px, underline-grow draws a bar from the center in 300 ms.
• •Floating label: moves up and scales to 0.78 in 180 ms when the field is focused or has a value.
• •Message: slides down and expands its height on a spring (stiffness 500, damping 36); the description cross-fades in 150 ms.
• •Shake: a 420 ms horizontal shake when the field enters the error state, when the error text changes, or when shakeKey changes.
• •Reduced motion: no shake, no lift and no CSS transitions; messages appear and disappear instantly.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related