Input

Displays a form input field or a component that looks like an input field.

tsx

1
2
3
4<div className="grid gap-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Input is a native HTML text field with shadcn styling. HTML types are supported (text, email, url, number, password, tel, search, file…); pass one via type.

Always pair it with a Label for accessibility (via for/htmlFor).

Installation

Terminal

$ bext ui add input

Copy and paste the following into src/components/ui/input.tsx.

input.tsx

1
2
3
4<div className="grid gap-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Usage

tsx

1
2
3
4
5
6import { Input, Label } from "@bext-stack/ui/primitives"

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

Anatomy

<Input type="text|email|number|..." name value placeholder disabled required />

API Reference

Input

Prop	Type	Default	Description
type	"text" \| "email" \| "password" \| ...	"text"	Native HTML type.
name	string	—	Name for form submission.
value	string	—	Value (controlled) or defaultValue (uncontrolled).
placeholder	string	—	Muted placeholder.
disabled	boolean	—	Standard HTML.
required	boolean	—	Native HTML5 validation.
className	string	—	Default: flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs.

Keyboard

Key	Action
`Tab`	Moves focus in or out.
`Enter`	Submits the parent form (native behavior).

Accessibility

Always link a <Label htmlFor="id"> to the <Input id="id"> so that clicking the label focuses the field and assistive technologies announce the label.

Examples

Disabled

tsx

<Input disabled value="Disabled" aria-label="Disabled input" />

Try it live Open in play

Edit this example live in the bext playground. It compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A styled text field: a neutral border, rounded corners, and a
// comfortable padding. Try the default and disabled states.
const field = {
  width: "100%", height: 38, padding: "0 12px", borderRadius: 8, fontSize: 14,
  border: "1px solid #e2e8f0", background: "#fff", color: "#0a0a0a",
  fontFamily: "inherit", boxSizing: "border-box",
};

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Input</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A single-line text field.</p>
      <div style={{ display: "grid", gap: 12, marginTop: 22, maxWidth: 320 }}>
        <input style={field} placeholder="you@example.com" />
        <input style={field} defaultValue="prefilled value" />

The React idiom: same UI, for comparison.

← Hover Card Input OTP →

On This Page