Custom Input Component with Ref Forwarding

Build a reusable custom input component that exposes its underlying DOM element to parent components, allowing them to programmatically control focus and selection.

Requirements

Create a CustomInput component that:

1. Wraps a standard HTML input element with additional styling and behavior
2. Allows parent components to access the underlying input DOM element
3. Accepts all standard input props (placeholder, type, value, onChange, etc.)
4. Adds a custom label that displays above the input field
5. Exposes the input element so parents can call DOM methods like focus() and select()

Component Interface

The component should:

• Accept a label prop (string) to display above the input
• Accept any standard HTML input attributes
• Forward the ref to the underlying input element, not the wrapper div
• Render the label above the input field

Test Cases

• When a ref is attached to CustomInput and focus() is called on the ref, the input element receives focus @test
• When a ref is attached to CustomInput and select() is called on the ref, the input text is selected @test
• The CustomInput component accepts and applies standard input props like placeholder and value @test

Implementation

@generates

API

import React from 'react';

interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
}

declare const CustomInput: React.ForwardRefExoticComponent<
  CustomInputProps & React.RefAttributes<HTMLInputElement>
>;

export default CustomInput;

Dependencies { .dependencies }

react { .dependency }

Provides the forwardRef API and component types for building reusable components with ref forwarding.