Piplup
@piplup/rhf-adaptershtmlComponents

HtmlInputElement

A pre-integrated input component for native HTML input types with React Hook Form registration, value handling, and validation wiring.

HtmlInputElement connects a native <input> to React Hook Form and supports common input types without manually wiring register, Controller, or field-state plumbing.

Import

import { HtmlInputElement } from "@piplup/rhf-adapters/html";

Usage

Text

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      input: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="input"        placeholder="Type text here"        type="text"        control={control}        className="border px-2 block rounded"      />      <input        type="submit"        value="Submit"        className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3"      />    </form>  );}

Password

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      "secure-input": "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="secure-input"        placeholder="Type your super secret password here"        type="password"        control={control}      />    </form>  );}

Number

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      randomNumber: 0,    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="randomNumber"        placeholder="Type a random number here"        type="number"        control={control}      />    </form>  );}

Email

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      myEmail: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="myEmail"        type="email"        placeholder="Type your email here"        control={control}      />    </form>  );}

Radio

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      option: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <div>        <HtmlInputElement control={control} id="one" name="option" type="radio" value="one" />        <label htmlFor="one">One</label>      </div>      <div>        <HtmlInputElement control={control} id="two" name="option" type="radio" value="two" />        <label htmlFor="two">Two</label>      </div>    </form>  );}

Checkbox

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      checkbox: [],    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <div>        <HtmlInputElement          control={control}          id="one"          name="checkbox"          type="checkbox"          value="one"        />        <label htmlFor="one">One</label>      </div>      <div>        <HtmlInputElement          control={control}          id="two"          name="checkbox"          type="checkbox"          value="two"        />        <label htmlFor="two">Two</label>      </div>    </form>  );}

Color

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      color: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement name="color" type="color" control={control} />    </form>  );}

Range

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      altitude: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement name="altitude" type="range" control={control} />    </form>  );}

Date

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      date: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement name="date" type="date" control={control} />    </form>  );}

Time

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      time: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement name="time" type="time" control={control} />    </form>  );}

Date Time Local

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      datetimeLocal: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="datetimeLocal"        type="datetime-local"        control={control}      />    </form>  );}

Month

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      birthMonth: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement name="birthMonth" type="month" control={control} />    </form>  );}

Week

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      myWeek: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement name="myWeek" type="week" control={control} />    </form>  );}

File

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      uploadFiles: [],    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="uploadFiles"        type="file"        multiple        control={control}      />    </form>  );}
"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      query: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="query"        placeholder="Type text to search"        type="search"        control={control}      />    </form>  );}

Tel

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      phone: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="phone"        placeholder="Type your phone number"        type="tel"        control={control}      />    </form>  );}

URL

"use client";import { useForm } from "react-hook-form";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  const { control, handleSubmit } = useForm({    defaultValues: {      website: "",    },  });  return (    <form      noValidate      onSubmit={handleSubmit((data) => {        alert(JSON.stringify(data, null, 2));      })}    >      <HtmlInputElement        name="website"        placeholder="Type your website url"        type="url"        control={control}      />    </form>  );}

Props

Prop

Type

HtmlInputElement accepts native input props together with adapter props such as control, rules, transform, and message overrides.

The ref is forwarded to the underlying <input> element.

Notes

  • Use transform when the field value shape differs from the DOM value.
  • Checkbox, radio, file, and other specialized input types can still reuse the same adapter surface.
  • For custom input UIs, build on useHtmlInputAdapter.

See also

useHtmlInputAdapter

Reuse the input adapter logic in your own component.

useControllerAdapter

Core hook that powers controlled field integration.

HtmlFormLabelElement

A form label component that reads React Hook Form field state for styling and error-aware labeling.

HtmlTextareaElement

A pre-integrated textarea component for native multi-line input with React Hook Form value and validation wiring.

On this page

ImportUsageTextPasswordNumberEmailRadioCheckboxColorRangeDateTimeDate Time LocalMonthWeekFileSearchTelURLPropsNotesSee also