Pass ref as a normal prop in React 19

Since React 19, function components receive ref as a regular prop, so new code does not need forwardRef.

1. Accept ref in your props.
2. Pass it to the DOM element you want to expose.
3. Type it with the element type, for example through React.ComponentProps<'input'>.

This matters for reusable inputs and buttons in a design system, where parents need to focus or measure the element. Keep the exposed surface small: give the parent the DOM node it needs, not internal state.

If you maintain older components, you can migrate them gradually; forwardRef still works today.

type InputProps = React.ComponentProps<'input'> & { label: string };

function TextInput({ label, ref, ...rest }: InputProps) {
  return (
    <label>
      {label}
      <input ref={ref} {...rest} />
    </label>
  );
}