Input

Text input with start/end adornments, error state, sizes, and imperative ref API. Also includes DebouncedInput and InlineInput variants.

Import

import { Input, DebouncedInput, InlineInput } from 'reablocks';

Input Props

Also accepts all standard <input> HTML attributes (except size).

Basic Usage

<Input placeholder="Enter text..." onValueChange={setValue} />

With Adornments

<Input start={<SearchIcon />} placeholder="Search..." />
<Input end={<ClearIcon />} placeholder="Type here..." />

Sizes

<Input size="small" placeholder="Small" />
<Input size="medium" placeholder="Medium" />
<Input size="large" placeholder="Large" />

Error State

<Input error placeholder="Invalid input" />

Ref API

const ref = useRef<InputRef>(null);

<Input ref={ref} />

// Imperative methods:
ref.current.focus();
ref.current.blur();
ref.current.select();
ref.current.inputRef;      // HTMLInputElement ref
ref.current.containerRef;  // Container div ref

DebouncedInput

Wraps Input with debounced onChange. Enter key bypasses debounce.

DebouncedInput Props

Extends all Input props, plus:

<DebouncedInput
  debounce={300}
  placeholder="Search..."
  onValueChange={handleSearch}
/>

InlineInput

Auto-sizing inline input that grows with its content. Uses CSS grid for width calculation.

InlineInput Props

Also accepts all standard <input> HTML attributes.

<InlineInput placeholder="Type..." value={value} onChange={handleChange} />

InputTheme Interface

interface InputTheme {
  base: string;       // Container (flex, border, rounded, bg, transition)
  input: string;      // Input element (flex-1, bg-transparent, outline-hidden)
  inline: string;     // InlineInput specific styles
  focused: string;    // Focused container state
  disabled: string;   // Disabled state
  fullWidth: string;  // Full width override
  error: string;      // Error border
  sizes: { small, medium, large };
  adornment: {
    base: string;     // Adornment container (flex, items-center, svg sizing)
    start: string;    // Start adornment spacing
    end: string;      // End adornment spacing
  };
}