Input

Input is a reusable form field primitive from @branditdev/ui.

Preview

Usage

import { Input } from '@branditdev/ui';

export function InputDemo() {
  return (
    <div className='flex flex-col gap-3'>
      <Input placeholder='Default input' />
      <Input placeholder='Disabled input' disabled />
    </div>
  );
}

API

const Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & RefAttributes<HTMLInputElement>>

Defined in: components/input/input.tsx:15

Form input primitive with semantic token styling. Uses forwardRef for React 18 compatibility (e.g. react-hook-form). Remove forwardRef when upgrading to React 19.

Param

Input element props.

Returns

A styled input element.

Source

import * as React from 'react';

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

export type InputProps = React.ComponentProps<'input'>;

const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
  { className, type, ...rest },
  ref
) {
  return (
    <input
      ref={ref}
      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
      )}
      {...rest}
    />
  );
});

export { Input };
FieldKbd