Input

TS

import { … } from "@fungi.computer/caps/components/input";

Hero

TSX

import { Input } from "@fungi.computer/caps/components/input";

export default function Hero() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Input defaultValue="Spore Scout" placeholder="Display name" />
      <Input placeholder="you@example.com" type="email" />
    </div>
  );
}

States

TSX

import { Input } from "@fungi.computer/caps/components/input";

export default function States() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Input defaultValue="not-a-real-code" invalid />
      <Input defaultValue="Locked field" disabled />
    </div>
  );
}

Search

TSX

import { SearchInput } from "@fungi.computer/caps/components/input";

function SearchIcon() {
  return (
    <svg fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  );
}

export default function Search() {
  return (
    <SearchInput leading={<SearchIcon />} placeholder="Search mushrooms…" />
  );
}

Props

InputProps

Prop	Type	Description
invalid?	boolean

• invalid?boolean

Full types: API reference.