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>  );}

'use client';import { FormContainer } from '@piplup/rhf-core';import { HtmlInputElement } from '@piplup/rhf-adapters/html';export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        input: ''      }}    >      <HtmlInputElement         name="input"        placeholder="Type text here"        type="text"        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"      />    </FormContainer>  );}

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>  );}

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

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        randomNumber: 0,      }}    >      <HtmlInputElement        name="randomNumber"        placeholder="Type a random number here"        type="number"      />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        myEmail: "",      }}    >      <HtmlInputElement        name="myEmail"        type="email"        placeholder="Type your email here"      />    </FormContainer>  );}

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>  );}

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

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>  );}

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

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        color: "",      }}    >      <HtmlInputElement name="color" type="color" />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        altitude: "",      }}    >      <HtmlInputElement name="altitude" type="range" />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        date: "",      }}    >      <HtmlInputElement name="date" type="date" />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        time: "",      }}    >      <HtmlInputElement name="time" type="time" />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        datetimeLocal: "",      }}    >      <HtmlInputElement name="datetimeLocal" type="datetime-local" />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        birthMonth: "",      }}    >      <HtmlInputElement name="birthMonth" type="month" />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        myWeek: "",      }}    >      <HtmlInputElement name="myWeek" type="week" />    </FormContainer>  );}

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 { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        uploadFiles: [],      }}    >      <HtmlInputElement name="uploadFiles" type="file" multiple />    </FormContainer>  );}

Search

"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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        query: "",      }}    >      <HtmlInputElement        name="query"        placeholder="Type text to search"        type="search"      />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        phone: "",      }}    >      <HtmlInputElement        name="phone"        placeholder="Type your phone number"        type="tel"      />    </FormContainer>  );}

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>  );}

"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}      onError={(errors) => {        alert(JSON.stringify(errors, null, 2));      }}      defaultValues={{        website: "",      }}    >      <HtmlInputElement        name="website"        placeholder="Type your website url"        type="url"      />    </FormContainer>  );}

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.