---
title: Input
description: Render accessible provider-backed text inputs
type: reference
summary: Use Input for text entry in custom documentation and application interfaces.
url: /docs/components/input
source: apps/template/content/docs/components/input.mdx
related:
  - /docs/components
  - /docs/components/toggle
---

# Input

import { Input } from "@vercel/geistdocs/components/input";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <Input
    aria-label="Project domain"
    defaultValue="geistdocs"
    prefix="https://"
    suffix=".dev"
    width={320}
  />
</div>

```tsx
import { Input } from "@vercel/geistdocs/components/input";

export function SearchField() {
  return <Input aria-label="Search documentation" placeholder="Search" />;
}
```

Use `typeName` for the native input type. Labels, prefix and suffix adornments, error content, sizes, and rounded fields are supported by the public provider; the private package resolves the component through Geistcn.