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 — champ texte HTML natif stylé shadcn. Types HTML supportés (text, email, url, number, password, tel, search, file…) — passer via type.

Toujours accompagné d'un Label pour l'accessibilité (via for/htmlFor).

Installation

Terminal

$ bext ui add input

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"	Type HTML natif.
name	string	—	Nom pour form submission.
value	string	—	Valeur (contrôlée) ou defaultValue (non-contrôlée).
placeholder	string	—	Placeholder muted.
disabled	boolean	—	Standard HTML.
required	boolean	—	Validation HTML5 native.
className	string	—	Défaut : flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs.

Keyboard

Key	Action
`Tab`	Focus / défocus.
`Enter`	Submit le form parent (comportement natif).

Accessibility

Toujours lier un <Label htmlFor="id"> au <Input id="id"> pour que le clic sur le label focus le champ + les AT annoncent le label.

Examples

Disabled

tsx

<Input disabled value="Disabled" />

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