Input
Displays a form input field or a component that looks like an input field.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/input.tsx
export function Input(o = {}) {
const c = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
return \`<input type="\${o.type || "text"}" placeholder="\${o.placeholder || ""}" class="\${c} \${o.class || ""}"/>\`;
}Installation
$ bext ui add inputCopy and paste the following into src/components/ui/input.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/input.tsx
export function Input(o = {}) {
const c = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
return \`<input type="\${o.type || "text"}" placeholder="\${o.placeholder || ""}" class="\${c} \${o.class || ""}"/>\`;
}Examples
Default
Disabled
With Label
With Button
File
On This Page