registry:component

Input

v1.0.0ga

Text input primitive for forms and command surfaces.

Registry Endpoint

npx shadcn@latest add @aavya/ui-input

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-input.json

Live Preview

Props

Input forwards remaining props to all <input> element props.

Guidelines

Always pair an Input with a visible <label> (or an aria-label if truly none).
Set the right type (email, password, number) and inputMode for the mobile keyboard.
Show validation errors as text next to the field, linked via aria-describedby.

Don’t

Don't use placeholder text as the label — it disappears once the user types.
Don't disable an input to mean 'not now' without explaining why.
Don't signal the invalid state with color alone.

Accessibility

Role

Native <input> (handled).

Keyboard

Standard text-editing keys; Tab moves focus. (handled)

Screen reader

Announced via its associated <label>; the error state via aria-invalid. You provide the label and the error association.

Focus

A visible focus ring is handled; don't remove it.

Gotcha

A placeholder is not a label — screen readers may not announce it reliably; always associate a real label.

Usage Snippet

import { Input } from '@/components/ui/input'

export default function Example() {
  return (
    <div className="p-6">
      <Input />
    </div>
  )
}

Source Preview

import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot='input'
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 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',
        className
      )}
      {...props}
    />
  )
}

export { Input }