Input
A styled single-line text input.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
import { Input } from "@moe-ui/registry/components/ui/input";
export default function InputPreview() {
return <Input placeholder="Email" />;
}
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add inputUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Input } from "@/components/ui/input";Variants and composition
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Associate the control with a visible label. Keyboard focus, disabled state, and validation semantics are covered by the web test matrix.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports1 exports
Input"use client";
import { cn } from "../../lib/utils";
import { Platform, TextInput, type TextInputProps } from "react-native";
function Input({
className,
...props
}: TextInputProps & React.RefAttributes<TextInput>) {
return (
<TextInput
className={cn(
"dark:bg-input/30 border-input bg-background text-foreground flex h-10 w-full min-w-0 flex-row items-center rounded-md border px-3 py-1 text-base leading-5 shadow-sm shadow-black/5 sm:h-9",
props.editable === false &&
cn(
"opacity-50",
Platform.select({
web: "disabled:pointer-events-none disabled:cursor-not-allowed",
}),
),
Platform.select({
web: cn(
"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground outline-none transition-[color,box-shadow] md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
),
native: "placeholder:text-muted-foreground/50",
}),
className,
)}
{...props}
/>
);
}
export { Input };