Piplup
@piplup/rhf-adaptershtmlComponents

HtmlButtonElement

A pre-integrated button component that connects native button behavior to React Hook Form form state.

HtmlButtonElement is a native <button> wrapper for React Hook Form-aware actions such as submit, reset, and state-driven button disabling.

Import

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

Usage

Submit

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

Reset

"use client";import { useForm } from "react-hook-form";import { HtmlButtonElement, 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));      })}    >      <div>        <HtmlInputElement          name="input"          placeholder="Type text here"          type="text"          control={control}          className="border px-2 block rounded"        />      </div>      <div>        <HtmlButtonElement          control={control}          type="reset"          className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3"        >          Reset        </HtmlButtonElement>      </div>    </form>  );}
"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlButtonElement, HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}    >      <div>        <HtmlInputElement          name="input"          placeholder="Type text here"          type="text"          className="border px-2 block rounded"        />      </div>      <div>        <HtmlButtonElement          type="reset"          className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3"        >          Reset        </HtmlButtonElement>      </div>    </FormContainer>  );}

Button

"use client";import { useForm } from "react-hook-form";import { HtmlButtonElement, 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));      })}    >      <div>        <HtmlInputElement          name="input"          placeholder="Type text here"          type="text"          control={control}          className="border px-2 block rounded"        />      </div>      <div>        <HtmlButtonElement control={control} type="button"        className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3"        >          Button        </HtmlButtonElement>      </div>    </form>  );}
"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlButtonElement, HtmlInputElement } from "@piplup/rhf-adapters/html";export default function Page() {  return (    <FormContainer      onSubmit={(data) => {        alert(JSON.stringify(data, null, 2));      }}    >      <div>        <HtmlInputElement          name="input"          placeholder="Type text here"          type="text"          className="border px-2 block rounded"        />      </div>      <div>        <HtmlButtonElement          type="button"          className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3"        >          Button        </HtmlButtonElement>      </div>    </FormContainer>  );}

Props

Prop

Type

HtmlButtonElement accepts standard native button attributes alongside adapter props such as control, disableOnError, and disableOnIsSubmitting.

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

Notes

  • Use type="submit" or type="reset" to delegate to the surrounding form.
  • Use disableOnError or disableOnIsSubmitting when the button should react to form state automatically.
  • For custom button UIs, build on useHtmlButtonAdapter.

See also

useHtmlButtonAdapter

Build a custom button component with the same adapter behavior.

useFormStateAdapter

Core hook that powers the button adapter's form-state wiring.

Installation

Previous Page

HtmlFormHelperTextElement

A helper text component for rendering hints and validation messages from React Hook Form field state.

On this page

ImportUsageSubmitResetButtonPropsNotesSee also