Skip to content
Logic2BUI

Search docs

Search components and documentation

New
Menu

Input

Displays a form input field.

Installation

npx logic2b@next add input

Usage

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.

View JSON

Input

Component
Props: React.ComponentProps<"input">

Accessibility contract

Machine-readable behavior and consumer responsibilities for input.

View JSON
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.