# All files / src/components/ui Input.tsx

100% Statements 3/3
100% Branches 7/7
100% Functions 1/1
100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43

    3x

    165x

    3x

     import { forwardRef, type InputHTMLAttributes } from 'react';

    interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
      label?: string;
      error?: string;
    }

    const Input = forwardRef<HTMLInputElement, InputProps>(
      ({ label, error, className = '', ...props }, ref) => {
        return (
          <div className="flex flex-col gap-1.5">
            {label && (
              <label className="text-sm font-medium text-text-secondary">
                {label}
              </label>
            )}
            <input
              ref={ref}
              className={`
                w-full px-4 py-2.5 text-sm
                bg-surface-secondary
                text-text-primary
                placeholder:text-text-placeholder
                border border-border
                rounded-input
                transition-button
                focus:outline-none focus:bg-white focus:border-accent focus:ring-0
                disabled:opacity-50 disabled:cursor-not-allowed
                ${error ? 'border-red bg-red-bg' : ''}
                ${className}
              `}
              {...props}
            />
            {error && <p className="text-xs text-red">{error}</p>}
          </div>
        );
      }
    );

    Input.displayName = 'Input';
    export { Input };
    export type { InputProps };