Input

Displays a form input field for user text entry.

Installation

import { Input } from "@gradeui/ui"

Usage

Examples

With Label

Password

With Icon

Disabled

File Input

Props

Prop	Type	Default	Description
type	string	"text"	The type of input (text, email, password, etc.).
placeholder	string	-	Placeholder text displayed when empty.
disabled	boolean	false	Whether the input is disabled.
className	string	-	Additional CSS classes.

Accessibility

Uses native <input> element
Always pair with a Label component for accessibility
Supports all standard input attributes
Focus ring visible for keyboard users

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/input.md and shipped inside the published @gradeui/ui tarball.

---
name: Input
import: "@gradeui/ui"
props:
  - type?: string (text | email | password | number | search | url | tel | date)
  - All native input HTML attrs (value, onChange, placeholder, disabled, required)
when_to_use: Any single-line text entry. Always pair with a Label for accessibility.
composes_with: [Label, Form, Card (in CardContent), Button (form submit)]
aliases: [text field, textbox, textfield, form field, text input, secure field, search field, url field, number field, textinput, text input field, react native textinput]
---

```jsx
<div className="grid gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>
```

Button

Textarea