DocsComponents

Input

Text fields with floating labels, helper text, and validation.

Project name

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/input.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

onChange receives the value before the event. Use multiline for a text area, error for validation feedback, and maxLength for a character counter.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

Input supports both models. Pass value and onChange for a controlled field. Omit value and use defaultValue for an uncontrolled field; changing defaultValue later does not replace the current user input.

onChange receives the text value first and the native React change event second. Keep a field controlled or uncontrolled throughout its lifetime. The same behavior applies when multiline renders a textarea.

tsx

// Controlled: the parent owns the current value.
const [name, setName] = useState("");
<Input label="Name" value={name} onChange={setName} />

// Uncontrolled: Input owns the value after initialization.
<Input label="Name" defaultValue="Javi" name="name" />

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`Input`

Property	Type	Default
`error`	`React.ReactNode`	`—`
`floating`	`boolean`	`true`
`hint`	`React.ReactNode`	`''`
`icon`	`React.ReactNode`	`—`
`label`	`React.ReactNode`	`—`
`multiline`	`boolean`	`false`
`rows`	`number`	`—`
`ref`	`React.Ref<InputHandle>`	`—`
`classNames`	`InputTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`InputTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Callbacks

Property	Type	Default
`onChange`	`(value: string, event: React.ChangeEvent<InputElement>) => void`	`—`

Also inherits Omit<React.InputHTMLAttributes<InputElement>, 'onChange' | 'size'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Additional defaults on inherited props: className = ''; disabled = false; required = false; type = 'text'.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

bar
counter
disabled
error
errored
filled
fixed
hidden
hint
icon
input
inputElement
label
required
withIcon

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/input.

InputTheme

tsx

type InputTheme = Partial<
  Record<
    | 'bar'
    | 'counter'
    | 'disabled'
    | 'error'
    | 'errored'
    | 'filled'
    | 'fixed'
    | 'hidden'
    | 'hint'
    | 'icon'
    | 'input'
    | 'inputElement'
    | 'label'
    | 'required'
    | 'withIcon',
    string
  >
>;

InputClassNames

tsx

type InputClassNames = InputTheme;

InputElement

tsx

type InputElement = HTMLInputElement | HTMLTextAreaElement;

InputHandle

tsx

interface InputHandle {
  focus(): void;
  blur(): void;
  readonly inputElement: InputElement | null;
}

InputProps

tsx

interface InputProps extends Omit<React.InputHTMLAttributes<InputElement>, 'onChange' | 'size'> {
  error?: React.ReactNode;
  floating?: boolean;
  hint?: React.ReactNode;
  icon?: React.ReactNode;
  label?: React.ReactNode;
  multiline?: boolean;
  rows?: number;
  onChange?: (value: string, event: React.ChangeEvent<InputElement>) => void;
  ref?: React.Ref<InputHandle>;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: InputTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: InputTheme;
}

Material guidelines

Labels identify a field throughout entry; a placeholder alone is insufficient. Keep helper text concise and describe how to resolve an error.
Align related fields to common keylines. Multiline text uses the same type family as other fields, while its content area grows vertically.

Material Design 1: Text fields