Installation
npx logic2b@next add inputUsage
import { Input } from "@/components/ui/input"
<Input type="email" placeholder="Email" />
Supports every native input type including file. Invalid state styling via
aria-invalid.
Usage notes
Input renders a native <input> and forwards every standard attribute
(React.ComponentProps<"input">).
Examples
File
Disabled
Invalid
Live playground
Edit the component props and inspect the exact JSX before copying it. The preview loads only when this section enters the viewport.
Generated JSX
<Input
type="email"
placeholder="you@example.com"
aria-label="Email address"
/>API reference
Generated from the public TypeScript exports in src/ui/input.tsx.
Input
ComponentProps: React.ComponentProps<"input">Accessibility contract
Machine-readable behavior and consumer responsibilities for input.
- Support
- Native semantics
- Pattern
- textbox
- HTMLInputElement
Built-in semantics
- Forwards native input semantics, required, disabled and aria-invalid state.
Consumer responsibilities
- Associate a visible label with id/htmlFor or provide aria-label.