Primitives/Input
Input
Single-line text field with focus ring and aria-invalid state.
- Version
- 1.0.1
- Tier
- Primitive
- Updates taken
- Minor and patch
- Files
- 1
Preview
Install
In a project already set up on the contract, which is what registers the @ja3dan prefix. If yours isn't, set it up first.
bunx shadcn@latest add @ja3dan/input Also installs @base-ui/react if the project doesn't have them.
Source
What lands in your project, read from the published item rather than the working tree.
import * as React from "react";import { Input as InputPrimitive } from "@base-ui/react/input";import { cn } from "@/lib/utils";function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( <InputPrimitive type={type} data-slot="input" className={cn( "h-9 w-full min-w-0 rounded-md border border-input bg-card px-3 py-2 text-sm text-foreground transition-[border-color,box-shadow] duration-150 ease-out outline-none placeholder:text-subtle-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive", className, )} {...props} /> );}export { Input };