stable v2.0

Input

Text input field with label, helper text, error state, and icon support.

Preview

Email We'll never share your email.

Password Password must be at least 8 characters.

Code

<!-- Default -->
<div class="flex flex-col gap-1.5">
  <label class="text-sm font-medium text-neutral-700 dark:text-neutral-300">Email</label>
  <input type="email" placeholder="you@example.com"
    class="h-10 px-3 rounded-lg border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-sm placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"/>
  <span class="text-xs text-neutral-500">We'll never share your email.</span>
</div>

<!-- With left icon -->
<div class="flex flex-col gap-1.5">
  <label class="text-sm font-medium text-neutral-700 dark:text-neutral-300">Search</label>
  <div class="relative">
    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"/><path stroke-linecap="round" d="M21 21l-4.35-4.35"/>
    </svg>
    <input type="text" placeholder="Search..."
      class="h-10 pl-9 pr-3 w-full rounded-lg border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-sm placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"/>
  </div>
</div>

<!-- Error state -->
<div class="flex flex-col gap-1.5">
  <label class="text-sm font-medium text-neutral-700 dark:text-neutral-300">Password</label>
  <input type="password" value="short"
    class="h-10 px-3 rounded-lg border border-red-500 bg-white dark:bg-neutral-900 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 transition"/>
  <span class="text-xs text-red-600 dark:text-red-400">Password must be at least 8 characters.</span>
</div>

<!-- Disabled -->
<div class="flex flex-col gap-1.5">
  <label class="text-sm font-medium text-neutral-400">Disabled Input</label>
  <input type="text" disabled value="Cannot edit this"
    class="h-10 px-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-sm text-neutral-400 cursor-not-allowed"/>
</div>

import { forwardRef } from 'react'

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string
  error?: string
  hint?: string
  leftIcon?: React.ReactNode
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, hint, leftIcon, className, ...props }, ref) => (
    <div className="flex flex-col gap-1.5">
      {label && <label className="text-sm font-medium text-neutral-700 dark:text-neutral-300">{label}</label>}
      <div className="relative">
        {leftIcon && (
          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none">
            {leftIcon}
          </span>
        )}
        <input
          ref={ref}
          className={`h-10 ${leftIcon ? 'pl-9' : 'px-3'} pr-3 w-full rounded-lg border text-sm placeholder:text-neutral-400 focus:outline-none focus:ring-2 transition ${
            error
              ? 'border-red-500 focus:ring-red-500'
              : 'border-neutral-300 dark:border-neutral-700 focus:ring-blue-500 focus:border-transparent'
          } bg-white dark:bg-neutral-900 ${className ?? ''}`}
          {...props}
        />
      </div>
      {error  && <span className="text-xs text-red-600 dark:text-red-400">{error}</span>}
      {!error && hint && <span className="text-xs text-neutral-500">{hint}</span>}
    </div>
  )
)
Input.displayName = 'Input'
export { Input }

@Component({
  selector: 'ui-input',
  standalone: true,
  template: `
    <div class="flex flex-col gap-1.5">
      <label *ngIf="label" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">{{label}}</label>
      <div class="relative">
        <input [type]="type" [placeholder]="placeholder" [disabled]="disabled"
          [class]="inputClass"/>
      </div>
      <span *ngIf="error" class="text-xs text-red-600">{{error}}</span>
      <span *ngIf="!error && hint" class="text-xs text-neutral-500">{{hint}}</span>
    </div>
  `
})
export class InputComponent {
  @Input() label = ''
  @Input() type = 'text'
  @Input() placeholder = ''
  @Input() error = ''
  @Input() hint = ''
  @Input() disabled = false

  get inputClass() {
    return `h-10 px-3 w-full rounded-lg border text-sm placeholder:text-neutral-400 focus:outline-none focus:ring-2 transition bg-white dark:bg-neutral-900 ${
      this.error ? 'border-red-500 focus:ring-red-500' : 'border-neutral-300 dark:border-neutral-700 focus:ring-blue-500'
    }`
  }
}

API Reference

Prop	Type	Default	Description
type	string	'text'	HTML input type
label	string	—	Label text above the input
placeholder	string	—	Placeholder text
error	string	—	Error message shown below input
disabled	boolean	false	Disables the input
leftIcon	ReactNode	—	Icon inside left edge