<Input id="email" label="Email" type="email" placeholder="you@example.com" hint="We'll never share your email." />

<Input id="email" label="Email" type="email" error="A valid email address is required." required />

<Input id="email" label="Email" type="email" placeholder="you@example.com" disabled />

<Input id="search" label="Search" prefixIcon={<SearchIcon />} placeholder="Search…" />
<Input id="amount" label="Amount" suffixIcon={<span>$</span>} type="number" />

function Demo() {
  const [v, setV] = useState('');
  return <Input id="clr" label="Label" value={v} onChange={(e) => setV(e.target.value)}
    clearable onClear={() => setV('')} />;
}

<Input id="username" label="Username" value="johndoe" success="Username is available!" />

<Input id="api-key" label="API Key" value="sk-abc123xyz" readOnly />

<Input id="bio" label="Bio" value={v} onChange={(e) => setV(e.target.value)} maxLength={50} showCount />

<Input id="password" label="Password" type="password" value={v} onChange={setV} />

<Input id="qty" label="Quantity" type="number" value={v} onChange={setV} min={0} max={99} />

<Input id="website" label="Website"
  prefixIcon={<span className="text-text-secondary text-xs font-mono">https://</span>}
  placeholder="yoursite.com" />

<Input id="handle" label="Twitter handle"
  prefixIcon={<span className="text-text-secondary">@</span>}
  placeholder="username" />

<Input id="price" label="Price"
  suffixIcon={<span className="text-text-secondary">USD</span>}
  type="number" />

<Input id="username" label="Username" value={v} onChange={setV}
  suffixIcon={<Spinner size="xs" />}
  hint="Checking availability…" />