A text input component for forms and user data entry with built-in styling and accessibility features.
Your API key is encrypted and stored securely.
import {
Field,
FieldDescription,Installation#
pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/input.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/input.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/input.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/input.json
Copy and paste the following code into your project.
"use client"
import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { useShakeOnInvalid } from "@/hooks/use-shake-on-invalid"
import { cn } from "@/lib/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
const ref = React.useRef<HTMLInputElement>(null)
useShakeOnInvalid(ref)
return (
<InputPrimitive
ref={ref}
type={type}
data-slot="input"
className={cn(
"h-9 w-full min-w-0 rounded-4xl px-4 py-1",
"text-base md:text-sm",
"border border-input bg-input/30 text-foreground placeholder:text-muted-foreground",
"transition-[color,background-color,border-color,box-shadow] duration-150 ease-out outline-none",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
"aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20",
"dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
)
}
export { Input }
Update the import paths to match your project setup.
Usage#
import { Input } from "@/components/ui/input"<Input />Examples#
Basic#
import { Input } from "@/components/ui/input"
export function InputBasic() {Field#
Use Field, FieldLabel, and FieldDescription to create an input with a
label and description.
Choose a unique username for your account.
import {
Field,
FieldDescription,Field Group#
Use FieldGroup to show multiple Field blocks and to build forms.
We'll send updates to this address.
import { Button } from "@/components/ui/button"
import {
Field,Disabled#
Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.
This field is currently disabled.
import {
Field,
FieldDescription,Invalid#
Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.
This field contains validation errors.
import {
Field,
FieldDescription,File#
Use the type="file" prop to create a file input.
Select a picture to upload.
import {
Field,
FieldDescription,Inline#
Use Field with orientation="horizontal" to create an inline input.
Pair with Button to create a search input with a button.
import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"Grid#
Use a grid layout to place multiple inputs side by side.
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
Required#
Use the required attribute to indicate required inputs.
This field must be filled out.
import {
Field,
FieldDescription,Badge#
Use Badge in the label to highlight a recommended field.
import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"Input Group#
To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.
import { InfoIcon } from "lucide-react"
import { Field, FieldLabel } from "@/components/ui/field"Button Group#
To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"Form#
A full form example with multiple inputs, a select, and a button.
import { Button } from "@/components/ui/button"
import {
Field,RTL#
To enable RTL support in shadcn/ui, see the RTL configuration guide.
مفتاح API الخاص بك مشفر ومخزن بأمان.
"use client"
import * as React from "react"