useInputBase

A base hook for all input-like components (e.g., Input, AutoSuggest). It centralizes controlled/uncontrolled value handling, focus state, common behaviors like selectOnFocus or clearOnEscape, and builds ARIA/data attributes. Styling is not enforced.

Import

import { useInputBase } from "@libdev-ui/base/hooks";

API

useInputBase(props)

Props:

• value?: string — Controlled value
• defaultValue?: string — Uncontrolled initial value
• disabled?: boolean — Disables the field
• readOnly?: boolean — Read-only field
• required?: boolean — Marks as required
• autoFocus?: boolean — Focus on mount
• selectOnFocus?: boolean — Select all text on focus
• clearOnEscape?: boolean — Clear the field on Escape
• id?: string, name?: string, placeholder?: string, type?: HTMLInputTypeAttribute
• inputRef?: React.Ref<HTMLInputElement>
• Events:
  • onChange(event, value)
  • onFocus(event)
  • onBlur(event)
  • onKeyDown(event)
  • onKeyUp(event)
  • onClear() — Fired after clear (via clear button or Escape)

Return:

• value: string — Current value
• focused: boolean — Whether the field is focused
• disabled: boolean
• readOnly: boolean
• required: boolean
• inputRef: RefObject<HTMLInputElement>
• Methods: focus(), blur(), select(), setValue(next)
• getRootProps(): DataAttributes
• getInputProps(extra?): InputHTMLAttributes<HTMLInputElement>

Example (custom component)

import { useInputBase } from "@libdev-ui/base/hooks";

function CustomInput(props) {
  const { value, focused, getRootProps, getInputProps } = useInputBase(props);

  return (
    <div {...getRootProps()} className="custom-input-root">
      <input {...getInputProps()} className="custom-input" />
      {focused && <span className="caret" />}
    </div>
  );
}

Accessibility:
useInputBase automatically applies aria-required, aria-readonly, and clears with Escape when clearOnEscape is set.