# Piplup - Collection of Lightweight modular libraries (/docs)



## Introduction [#introduction]

**Piplup** is a collection of lightweight, modular libraries designed to simplify the development of fast, interactive, and reusable user interfaces.

It focuses on improving developer experience (DX) by providing clean abstractions and production-ready utilities that help you build scalable applications more efficiently.

Piplup currently includes the following packages:

<Cards>
  <Card title="@piplup/rhf-core" href="/docs/rhf-core/installation">
    Core utilities and primitives for building form-connected components with
    React Hook Form.
  </Card>

  <Card title="@piplup/rhf-adapters" href="/docs/rhf-adapters/installation">
    Pre-built adapters for integrating custom and third-party UI components with
    React Hook Form.
  </Card>

  <Card title="@piplup/cache-buster" href="/docs/cache-buster/installation">
    Utilities for managing and invalidating application cache effectively.
  </Card>

  <Card title="@piplup/vite-plugin-cache-buster" href="/docs/vite-plugin-cache-buster/installation">
    A Vite plugin for automated cache busting, powered by @piplup/cache-buster.
  </Card>

  <Card title="@piplup/react-acl" href="/docs/react-acl/installation">
    A flexible access control layer for managing roles and permissions in React
    applications.
  </Card>

  <Card title="@piplup/utils" href="/docs/utils/installation">
    Shared helper functions, hooks, and common utilities used across Piplup
    packages.
  </Card>
</Cards>


# Installation - @piplup/cache-buster (/docs/cache-buster/installation)



`@piplup/cache-buster` is a lightweight React utility that ensures users always get the latest deployed version of your app.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/cache-buster
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Setup build integration [#setup-build-integration]

Cache busting requires a release ID to be generated at build time.

### Option 1: CLI [#option-1-cli]

Update your package.json:

```json
{
  "scripts": {
    "build": "piplup-cache-buster --publicDir=public && react-scripts build"
  }
}
```

This will:

* Generate a unique release ID
* Save it in your public/ directory
* Allow runtime comparison

### Option 2: Vite plugin [#option-2-vite-plugin]

If you're using Vite:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/vite-plugin-cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/vite-plugin-cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/vite-plugin-cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/vite-plugin-cache-buster
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Update `vite.config.(ts|mts|js|mjs)`:

```tsx
import { vitePluginCacheBuster } from "@piplup/vite-plugin-cache-buster";

export default {
  plugins: [vitePluginCacheBuster()],
};
```

### Why this step is required [#why-this-step-is-required]

The library works by comparing:

* Current release ID (from server)
* Stored release ID (in browser)

Without generating this file at build time, cache busting cannot work.


# Installation — @piplup/react-acl (/docs/react-acl/installation)



`@piplup/react-acl` provides a small ACL context, a `HasAccess` conditional component, and a `useAcl` hook for programmatic checks.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/react-acl
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/react-acl
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/react-acl
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/react-acl
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Quickstart [#quickstart]

Wrap your app with `AclProvider` and pass roles/permissions (can be loaded asynchronously):

```tsx
import { AclProvider } from "@piplup/react-acl";

export default function App({ children }) {
  // load roles/permissions from API
  return (
    <AclProvider loading={false} roles={["user"]} permissions={["read"]}>
      {children}
    </AclProvider>
  );
}
```

See the `AclProvider`, `HasAccess`, and `useAcl` pages for API details and examples.

## See also [#see-also]

* [AclProvider](/docs/react-acl/components/acl-provider)
* [HasAccess](/docs/react-acl/components/has-access)
* [useAcl](/docs/react-acl/hooks/use-acl)


# Installation — @piplup/rhf-core (/docs/rhf-core/installation)



## Install Core Package [#install-core-package]

Install the core package:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Optionally, install the adapters package for pre-built integrations:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Installation — @piplup/utils (/docs/utils/installation)



`@piplup/utils` contains small helpers and React hooks used across Piplup packages.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/utils
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/utils
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/utils
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/utils
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Quick usage [#quick-usage]

Import individual helpers:

```tsx
import { compact } from "@piplup/utils";

const arr = compact([1, null, 2]);
```

See the `helpers` and `hooks` pages for API details and examples.


# Installation — @piplup/vite-plugin-cache-buster (/docs/vite-plugin-cache-buster/installation)



`@piplup/vite-plugin-cache-buster` generates a release ID during your Vite build, enabling `@piplup/cache-buster` to detect new deployments and refresh stale client caches.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/vite-plugin-cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/vite-plugin-cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/vite-plugin-cache-buster
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/vite-plugin-cache-buster
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Setup [#setup]

Add the plugin to your Vite config:

```tsx
import { vitePluginCacheBuster } from "@piplup/vite-plugin-cache-buster";

export default {
  plugins: [vitePluginCacheBuster()],
};
```

## How it works [#how-it-works]

During build, the plugin:

* Generates a unique release ID
* Writes it to a static file (e.g. `/release.txt`)
* Makes it accessible to the browser at runtime

This file is later fetched by `@piplup/cache-buster` to detect updates.

## Why this is required [#why-this-is-required]

Cache busting relies on comparing:

* **Current release ID (from server file)**
* **Stored release ID (in browser storage)**

Without generating this file during build, the app cannot detect updates.

## When to use [#when-to-use]

Use this plugin if:

* You're using **Vite**
* You're using `@piplup/cache-buster`
* You want **automatic release ID generation**

## Next step [#next-step]

Integrate the runtime check — use `useReleaseStatus` or `<CacheBuster />` in your app.

## See also [#see-also]

* [Cache Buster - Installation](/docs/cache-buster/installation)
* [useReleaseStats](/docs/cache-buster/hooks/use-release-status)
* [CacheBuster](/docs/cache-buster/components/cache-buster)


# CacheBuster (/docs/cache-buster/components/cache-buster)



`CacheBuster` is a convenience wrapper around the `useReleaseStatus` hook.

It automatically checks for new deployments and **reloads the page when a new version is detected**.

## Basic usage [#basic-usage]

```tsx
import { CacheBuster } from '@piplup/cache-buster';

function App() {
  return (
    <CacheBuster storageKey="RELEASE">
      <YourApp />
    </CacheBuster>
  );
}
```

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="CacheBusterProps" />

## See also [#see-also]

* [useReleaseStatus](/docs/cache-buster/hooks/use-release-status)


# useReleaseStatus (/docs/cache-buster/hooks/use-release-status)



# Usage [#usage]

`useReleaseStatus` allows you to detect whether a new release is available and decide how your app should respond.

## Basic example [#basic-example]

```tsx
import { useReleaseStatus } from '@piplup/cache-buster';

function App() {
  const status = useReleaseStatus({
    storageKey: 'RELEASE',
  });

  if (status === 'new-release') {
    return (
      <div>
        <p>New version available</p>
        <button onClick={() => window.location.reload()}>
          Refresh
        </button>
      </div>
    );
  }

  return <YourApp />;
}
```

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseReleaseStatusProps" />

## Return value [#return-value]

The `useReleaseStatus` hook returns one of the following statuses: `error`, `new-release`, `no-release` or `null`.


# AclProvider (/docs/react-acl/components/acl-provider)



## Import [#import]

```tsx
import { AclProvider } from "@piplup/react-acl";
```

## Usage [#usage]

```tsx
<AclProvider loading={false} roles={["admin"]} permissions={["read","write"]}>
  <App />
</AclProvider>
```

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="AclProviderProps" />

## Notes [#notes]

* `roles` and `permissions` accept `string` or `number` values.
* Use the `loading` prop while your identity/ACL data is being fetched.


# HasAccess (/docs/react-acl/components/has-access)



## Import [#import]

```tsx
import { HasAccess } from "@piplup/react-acl";
```

## Basic example [#basic-example]

```tsx
<HasAccess permissions={["read"]}>
  <div>Visible to users with read permission</div>
</HasAccess>
```

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="HasAccessProps" />

## Examples [#examples]

* `fallback` can be used to render alternative UI when access is denied.
* `loading` prop can be supplied to show a loading placeholder while ACL data resolves.


# useAcl (/docs/react-acl/hooks/use-acl)



## Import [#import]

```tsx
import { useAcl } from "@piplup/react-acl";
```

## Basic example [#basic-example]

```tsx
function CheckAccess() {
  const { isAuthorized, loading } = useAcl();

  if (loading) return <div>Loading ACL...</div>;

  return <div>{isAuthorized({ permissions: 'read' }) ? 'Allowed' : 'Denied'}</div>;
}
```

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseAclReturnType" />


# Installation — @piplup/rhf-adapters (HTML) (/docs/rhf-adapters/html/installation)



`@piplup/rhf-adapters` provides prebuilt adapter hooks and components that connect UI elements to React Hook Form. The package is organized by subpath, so you only import the adapter family you need.

First, install the core packages, if not installed already:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then, install the adapters package:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Import [#import]

Import HTML adapters from the `html` subpath:

```tsx
import {
  HtmlInputElement,
  HtmlTextareaElement,
  useHtmlInputAdapter,
} from "@piplup/rhf-adapters/html";
```

The root `@piplup/rhf-adapters` entrypoint is not where the practical component and hook APIs live. Use the package `/html` subpath instead.

## See also [#see-also]

<Cards>
  <Card title="@piplup/rhf-core" href="/docs/rhf-core/installation">
    Install the core primitives that the adapter hooks build on.
  </Card>
</Cards>


# Installation — @piplup/rhf-adapters (mui-chips-input) (/docs/rhf-adapters/mui-chips-input/installation)



`@piplup/rhf-adapters/mui-chips-input` connects `mui-chips-input` fields to React Hook Form.

First, install the core packages, if not installed already:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then, install the adapters package together with the MUI Material and mui-chips-input peer dependencies:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-chips-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-chips-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-chips-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-chips-input
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Import [#import]

```tsx
import { MuiChipsInputElement, useMuiChipsInputAdapter } from "@piplup/rhf-adapters/mui-chips-input";
```

The root `@piplup/rhf-adapters` entrypoint is not where the practical component and hook APIs live. Use the package `/mui-chips-input` subpath instead.

## See also [#see-also]

* [@piplup/rhf-core](/docs/rhf-core/installation)
* [mui-chips-input](https://viclafouch.github.io/mui-chips-input/)


# Installation — @piplup/rhf-adapters (mui-color-input) (/docs/rhf-adapters/mui-color-input/installation)



`@piplup/rhf-adapters/mui-color-input` connects `mui-color-input` fields to React Hook Form.

First, install the core packages, if not installed already:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then, install the adapters package together with the MUI Material and mui-color-input peer dependencies:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-color-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-color-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-color-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-color-input
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Import [#import]

```tsx
import { MuiColorInputElement, useMuiColorInputAdapter } from "@piplup/rhf-adapters/mui-color-input";
```

Use `/mui-color-input` subpath when you need `mui-chips-input` components to stay in sync with `react-hook-form`.

## See also [#see-also]

* [mui-color-input](https://viclafouch.github.io/mui-color-input/)


# Installation — @piplup/rhf-adapters (mui-file-input) (/docs/rhf-adapters/mui-file-input/installation)



`@piplup/rhf-adapters/mui-file-input` connects `mui-file-input` fields to React Hook Form.

First, install the core packages, if not installed already:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then, install the adapters package together with the MUI Material and mui-file-input peer dependencies:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-file-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-file-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-file-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-file-input
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Import [#import]

```tsx
import { MuiFileInputElement, useMuiFileInputAdapter } from "@piplup/rhf-adapters/mui-file-input";
```

Use `/mui-file-input` subpath when you need `mui-file-input` components to stay in sync with `react-hook-form`.

## See also [#see-also]

* [mui-file-input](https://viclafouch.github.io/mui-file-input/)


# Installation — @piplup/rhf-adapters (@mui/material) (/docs/rhf-adapters/mui-material/installation)



`@piplup/rhf-adapters/mui-material` provides pre-integrated Material UI components and adapter hooks for React Hook Form.

First, install the core packages, if not installed already:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then install the adapters package together with the MUI Material peer dependencies:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Import [#import]

```tsx
import {
  MuiTextFieldElement,
  useMuiTextFieldAdapter,
} from "@piplup/rhf-adapters/mui-material";
```

Use `/mui-material` subpath when you want MUI components to participate in form state, validation, helper text composition, and `react-hook-form` controlled value handling without writing the wiring yourself.

## See also [#see-also]

* [Components](./components/mui-autocomplete-element)
* [Hooks](./hooks/use-mui-autocomplete-adapter)
* [useControllerAdapter](/Users/Sadik/code/piplup-react-hook-form-docs/content/docs/rhf-core/hooks/use-controller-adapter.mdx)


# Installation — @piplup/rhf-adapters (mui-one-time-password-input) (/docs/rhf-adapters/mui-one-time-password-input/installation)



`@piplup/rhf-adapters/mui-one-time-password-input` connects `mui-one-time-password-input` components to `react-hook-form`.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then, install the adapters package together with the MUI Material and mui-one-time-password-input peer dependencies:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-one-time-password-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-one-time-password-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-one-time-password-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-one-time-password-input
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Import [#import]

```tsx
import { MuiOtpInputElement, useMuiOtpInputAdapter } from "@piplup/rhf-adapters/mui-one-time-password-input";
```

Use `/mui-one-time-password-input` subpath when you need `mui-one-time-password-input` components to stay in sync with `react-hook-form`.

## See also [#see-also]

* [mui-one-time-password-input](https://viclafouch.github.io/mui-otp-input/)


# Installation — @piplup/rhf-adapters (mui-tel-input) (/docs/rhf-adapters/mui-tel-input/installation)



`@piplup/rhf-adapters/mui-tel-input` connects `mui-tel-input` components to `react-hook-form`.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then, install the adapters package together with the MUI Material and mui-tel-input peer dependencies:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-tel-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-tel-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-tel-input
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers mui-tel-input
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Import [#import]

```tsx
import { MuiTelInputElement, useMuiTelInputAdapter } from "@piplup/rhf-adapters/mui-tel-input";
```

Use `/mui-tel-input` subpath when you need `mui-tel-input` components to stay in sync with `react-hook-form`.

## See also [#see-also]

* [mui-tel-input](https://viclafouch.github.io/mui-tel-input/)


# Installation — @piplup/rhf-adapters (@mui/x-date-pickers) (/docs/rhf-adapters/mui-x-date-pickers/installation)



`@piplup/rhf-adapters/mui-x-date-pickers` provides pre-integrated MUI X Date Picker components and adapter hooks for React Hook Form.

First, install the core packages, if not installed already:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then install the adapters package together with the MUI Material and MUI X Date Pickers peer dependencies:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled @mui/x-date-pickers
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Additionally, install the date library of your choice for MUI X Date Pickers

<Tabs items="[&#x22;dayjs&#x22;, &#x22;date-fns&#x22;, &#x22;luxon&#x22;, &#x22;moment&#x22;]">
  <Tab value="dayjs">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install dayjs
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add dayjs
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add dayjs
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add dayjs
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="date-fns">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install date-fns
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add date-fns
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add date-fns
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add date-fns
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="luxon">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install luxon
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add luxon
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add luxon
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add luxon
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="moment">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install moment
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add moment
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add moment
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add moment
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>
</Tabs>

## Import [#import]

```tsx
import {
  MuiXDatePickerElement,
  useMuiXDatePickerAdapter,
} from "@piplup/rhf-adapters/mui-x-date-pickers";
```

Use `/mui-x-date-pickers` subpath when you want MUI X Date Pickers components to participate in form state, validation, helper text composition, and `react-hook-form` controlled value handling without writing the wiring yourself.

## See also [#see-also]

* [Components](./components/mui-x-date-calendar-element)
* [Hooks](./hooks/use-mui-x-date-calendar-adapter)
* [MUI X Date Pickers - QuickStart](https://mui.com/x/react-date-pickers/quickstart/)


# Installation — @piplup/rhf-adapters (react-number-format) (/docs/rhf-adapters/react-number-format/installation)



`@piplup/rhf-adapters/react-number-format` provides adapters for `react-number-format` inputs that need `react-hook-form` controlled value handling.

First, install the core packages, if not installed already:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-core react-hook-form
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Then install the adapters package together with the MUI Material and `react-number-format` peer dependencies:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled react-number-format
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled react-number-format
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled react-number-format
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @piplup/rhf-adapters @mui/material @emotion/react @emotion/styled react-number-format
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Import [#import]

```tsx
import { NumericFormatElement, useNumericFormatAdapter } from "@piplup/rhf-adapters/react-number-format";
```

Use `/react-number-format` subpath when you need `react-number-format` components to stay in sync with `react-hook-form`.

## See also [#see-also]

* [React Number Format](https://s-yadav.github.io/react-number-format/docs/intro/)


# FormContainer (/docs/rhf-core/components/form-container)



## Import [#import]

```tsx
import { FormContainer } from "@piplup/rhf-core";
```

## Usage [#usage]

Basic usage with `FormContainer`. It accepts the same options you would normally pass to `useForm` (for example: `defaultValues`, `resolver`, etc.) and handles form registration and submission wiring for you.

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;demo/core/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="FormContainerProps" />

`FormContainer` forwards refs to the underlying `<form>` element and exposes the `onSubmit` prop for reading the submitted form data.

## Notes [#notes]

* Use `useFormContext()` inside nested components to access `register`, `watch`, `setValue`, etc.
* You can pass any options accepted by `useForm` directly to `FormContainer` or `formContext` returned by `useForm` hook.
* Because `FormContainer` renders a native `<form>` with `noValidate` prop, therefore, browser-level validations are ignored unless explicitly enabled.

## See also [#see-also]

<Cards>
  <Card title="useForm" href="https://react-hook-form.com/docs/useform">
    Custom hook for managing forms with ease.
  </Card>

  <Card title="useFormContext" href="https://react-hook-form.com/docs/useformcontext">
    Hook to access form context values in nested components.
  </Card>
</Cards>


# FormErrorProvider (/docs/rhf-core/components/form-error-provider)



## Import [#import]

```tsx
import { FormErrorProvider } from "@piplup/rhf-core";
```

## Usage [#usage]

Wrap your form with `FormErrorProvider`. Provide an `errorParser` function to translate raw error objects into user-friendly messages, or rely on default behavior.

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;demo/core/form-error-parser.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="FormErrorProviderProps" />

## Patterns [#patterns]

* **Global mapping:** Use a single `errorParser` at the app root to ensure consistent copy and localization.
* **Field-level overrides:** Components can still render custom error messages when they need special phrasing.
* **i18n:** Combine `errorParser` with your localization system to return translated messages.

## Notes [#notes]

* `FormErrorProvider` does not replace form validation — it only maps and exposes error messages for rendering.
* `FormContainer` is pre-configured with `FormErrorProvider`, so you can directly use `errorParser` prop without wrapping with another FormErrorProvider.


# useControllerAdapter (/docs/rhf-core/hooks/use-controller-adapter)



`useControllerAdapter` is one of the main adapter building hook. It wraps React Hook Form's `useController` and returns an object for custom input components, including `value`, `onChange`, `onBlur`, `ref`, validation rules, helper text, and composed disabled or error state.

Use it when you are building an input-like component that needs both field binding and UI state in one place. If you only need field state for surrounding UI, `useFieldStateAdapter` is usually a better fit.

## Import [#import]

```tsx
import { useControllerAdapter } from "@piplup/rhf-core";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;demo/core/hooks/use-controller-adapter.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseControllerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseControllerAdapterReturnType" />

## Notes [#notes]

* `transform.input` changes the value your component receives, while `transform.output` changes what gets stored in the form.

## See also [#see-also]

* [useController](https://react-hook-form.com/docs/usecontroller)
* [useFieldStateAdapter](./use-field-state-adapter)


# useFieldStateAdapter (/docs/rhf-core/hooks/use-field-state-adapter)



`useFieldStateAdapter` is a lightweight adapter hook for components that need to react to a field's state without becoming the field input itself. It is useful for labels, helper text, wrappers, and other companion UI that should reflect validation or submission state.

Unlike `useControllerAdapter`, this hook does not return `value`, `onChange`, or `onBlur`. It focuses only on presentation-oriented field state.

## Import [#import]

```tsx
import { useFieldStateAdapter } from "@piplup/rhf-core";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;demo/core/hooks/use-field-state-adapter.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseFieldStateAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseFieldStateAdapterReturnType" />

## Notes [#notes]

* Use this hook for field-adjacent UI, not for the interactive input element itself.
* The hook reads state from a single field path and composes helper text from the current field error when available.
* If your component also needs field value binding, switch to `useControllerAdapter`.

## See also [#see-also]

* [useFieldState](./use-field-state)
* [useControllerAdapter](./use-controller-adapter)


# useFieldState (/docs/rhf-core/hooks/use-field-state)



`useFieldState` is a low-level hook for reading the state of one field from the current form. It is helpful when you want to react to a field being invalid, touched, dirty, disabled, or currently validating, but you do not need the adapter props returned by `useFieldStateAdapter` or `useControllerAdapter`.

The hook returns field-level state plus a few useful form-derived flags such as `disabled` and `isSubmitting`.

## Import [#import]

```tsx
import { useFieldState } from "@piplup/rhf-core";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;demo/core/hooks/use-field-state.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseFieldStateProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseFieldStateReturnType" />

## Notes [#notes]

* This hook is best when you want state only and plan to render your own UI from it.
* It reads a single field path and does not provide input binding helpers such as `value` or `onChange`.
* If you want helper text, class names, or style to be composed for you, use `useFieldStateAdapter` instead.

## See also [#see-also]

* [useFieldStateAdapter](./use-field-state-adapter)
* [useFormState](https://react-hook-form.com/docs/useformstate)


# useFormReset (/docs/rhf-core/hooks/use-form-reset)



`useFormReset` returns a `reset` function that behaves like the one returned by React Hook Form's `useForm`. It is useful when a nested component needs to reset the form without receiving the full form instance as a prop.

If you do not pass a `control`, the hook reads it from form context, which makes it a good fit for components rendered inside `FormContainer` or `FormProvider`.

## Import [#import]

```tsx
import { useFormReset } from "@piplup/rhf-core";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;demo/core/hooks/use-form-reset.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseFormResetProps" />

# Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseFormResetReturnType" />

## Passing values and options [#passing-values-and-options]

The returned function accepts the same arguments as React Hook Form's `reset`: an optional values object and an optional reset options object.

Reset to the current `defaultValues`:

```ts
reset();
```

Reset with new values:

```ts
reset({ name: "" });
```

Forward RHF reset options such as `keepDirty`:

```ts
reset({}, { keepDirty: true, keepValues: false });
```

## Notes [#notes]

* Pass `control` explicitly when you want to use the hook outside form context.
* The returned function mirrors React Hook Form's `reset` behavior and supported options.

## See also [#see-also]

* [reset](https://react-hook-form.com/docs/useform/reset)
* [useFormContext](https://react-hook-form.com/docs/useformcontext)


# useFormSetFocus (/docs/rhf-core/hooks/use-form-set-focus)



`useFormSetFocus` returns a `setFocus` function for moving focus to a registered field. It is useful when buttons, error summaries, or other nested components need to focus a form field without receiving the full form instance as a prop.

If you do not pass a `control`, the hook reads it from form context, which makes it easy to use inside `FormContainer` or `FormProvider`.

## Import [#import]

```tsx
import { useFormSetFocus } from "@piplup/rhf-core";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;demo/core/hooks/use-form-set-focus.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseFormSetFocusProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseFormSetFocusReturnType" />

## Notes [#notes]

* Use this hook when nested components need focus control.
* The returned function mirrors the familiar `react-hookf-form` `setFocus` API, including support for `shouldSelect`.
* The field must be registered and backed by a focusable element for focus to succeed.

## See also [#see-also]

* [setFocus](https://react-hook-form.com/docs/useform/setfocus)
* [useFormContext](https://react-hook-form.com/docs/useformcontext)


# useFormStateAdapter (/docs/rhf-core/hooks/use-form-state-adapter)



`useFormStateAdapter` adapts React Hook Form's `useFormState` output into a UI-friendly object that can be consumed by form-level components. It is useful for submit buttons, banners, summaries, and other components that should react to overall form validity, submission state, or scoped errors.

Compared with `useFieldStateAdapter`, this hook works from form state and optional field subscriptions rather than a single field's controller state.

## Import [#import]

```tsx
import { useFormStateAdapter } from "@piplup/rhf-core";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;demo/core/hooks/use-form-state-adapter.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseFormStateAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseFormStateAdapterReturnType" />

## Notes [#notes]

* Use `name` when the component should react only to a subset of form fields.
* `exact` matters when you want to avoid broader subscriptions for nested field paths.
* This hook is a good fit for form-level UI, while `useFieldStateAdapter` is better for UI tied to one field.

## See also [#see-also]

* [useFormState](https://react-hook-form.com/docs/useformstate)
* [useFieldStateAdapter](./use-field-state-adapter)


# Helpers Overview (/docs/utils/helpers/overview)



## compact [#compact]

Removes `null`/`undefined` values from arrays.

```tsx
import { compact } from "@piplup/utils";

const clean = compact([1, null, 2]); // [1,2]
```

## execSequentially [#execsequentially]

Run multiple functions in sequence producing a new function.

```tsx
import { execSequentially } from "@piplup/utils";

const combined = execSequentially(fn1, fn2);
combined();
```

## forkRef [#forkref]

Utilities for combining multiple refs.

```tsx
import { forkRef } from "@piplup/utils";

const ref = forkRef(refA, refB);
```

## hasOwnProperty [#hasownproperty]

Type-safe `hasOwnProperty` helper.

```ts
import { hasOwnProperty } from "@piplup/utils";

if (hasOwnProperty(obj, 'key')) { /* ... */ }
```

## setRef [#setref]

Helper to set callback or mutable refs.

## Storage helpers: `getItem`, `setItem`, `removeItem` [#storage-helpers-getitem-setitem-removeitem]

Small wrappers around `localStorage` access; use `useLocalStorage` hook for reactive state.


# useEventCallback (/docs/utils/hooks/use-event-callback)



```tsx
import { useEventCallback } from "@piplup/utils";

function Component() {
  const handle = useEventCallback((value: string) => {
    console.log(value);
  });

  return <button onClick={() => handle('hi')}>Click</button>;
}
```

## Props [#props]

<TypeTable
  type="{
fn: {
  description: (
    <>
      The callback to wrap. Receives the same arguments as the returned
      handler and its return value is forwarded.
    </>
  ),
  type: &#x22;(...args: Args) => Return&#x22;,
  typeDescription: (
    <>
      Generic callback signature — the hook preserves the callback identity
      across renders while forwarding arguments and return value.
    </>
  ),
  required: true,
},
}"
/>

## Return value [#return-value]

<TypeTable
  type="{
handler: {
  description: (
    <>
      Stable callback with the same signature as the input `fn`. Call this
      returned handler from event handlers or effects without recreating
      closures on every render.
    </>
  ),
  type: &#x22;(...args: Args) => Return&#x22;,
  typeDescription: (
    <>
      A memoized function that forwards arguments to the original callback
      and returns its result.
    </>
  ),
  required: true,
},
}"
/>


# useEventListener (/docs/utils/hooks/use-event-listener)



```tsx
import { useEventListener } from "@piplup/utils";

function Component() {
  useEventListener('resize', () => {
    console.log('resized');
  });
}
```

## Signature [#signature]

```tsx
import * as React from 'react';

export function useEventListener<EventName extends keyof MediaQueryListEventMap>(
  eventName: EventName,
  handler: (event: MediaQueryListEventMap[EventName]) => void,
  element: React.RefObject<MediaQueryList>,
  options?: AddEventListenerOptions | boolean
): void;

export function useEventListener<EventName extends keyof WindowEventMap>(
  eventName: EventName,
  handler: (event: WindowEventMap[EventName]) => void,
  element?: undefined,
  options?: AddEventListenerOptions | boolean
): void;

export function useEventListener<
  EventName extends keyof HTMLElementEventMap,
  T extends HTMLElement = HTMLDivElement
>(
  eventName: EventName,
  handler: (event: HTMLElementEventMap[EventName]) => void,
  element: React.RefObject<T>,
  options?: AddEventListenerOptions | boolean
): void;

export function useEventListener<EventName extends keyof DocumentEventMap>(
  eventName: EventName,
  handler: (event: DocumentEventMap[EventName]) => void,
  element: React.RefObject<Document>,
  options?: AddEventListenerOptions | boolean
): void;

export function useEventListener<
  EventName extends string,
  EventElement extends HTMLElement = HTMLDivElement
>(
  eventName: EventName,
  handler: (event: Event) => void,
  element?: React.RefObject<EventElement>,
  options?: AddEventListenerOptions | boolean
): void;

export function useEventListener<
  EventName extends string,
  EventNameWindow extends keyof WindowEventMap,
  EventNameHTMLElement extends keyof HTMLElementEventMap,
  EventNameMediaQuery extends keyof MediaQueryListEventMap,
  EventElement extends HTMLElement | MediaQueryList | void = void
>(
  eventName: EventName | EventNameHTMLElement | EventNameMediaQuery | EventNameWindow,
  handler: (
    event:
      | Event
      | HTMLElementEventMap[EventNameHTMLElement]
      | MediaQueryListEventMap[EventNameMediaQuery]
      | WindowEventMap[EventNameWindow]
  ) => void,
  element?: React.RefObject<EventElement>,
  options?: AddEventListenerOptions | boolean
): void;
```

### Type parameters and overrides [#type-parameters-and-overrides]

* `EventName`: union of allowed event string keys for the selected target (e.g. `keyof WindowEventMap` or `keyof HTMLElementEventMap`).
* `T` / `EventElement`: when targeting an element, `T` (or `EventElement`) constrains the element/ref type (e.g. `HTMLButtonElement`).
* `EventNameWindow`, `EventNameHTMLElement`, `EventNameMediaQuery`: internal helpers used by the broad overload that accepts any of the supported event maps.

When you need to force a specific overload or narrow the handler/event types you can provide explicit generics. Examples:

```tsx
// Narrow to an HTML element event (click on a button)
useEventListener<'click', HTMLButtonElement>(
  'click',
  (e) => { /* e is MouseEvent */ },
  buttonRef
);

// Window event (no element required)
useEventListener<'resize'>(
  'resize',
  (e) => { /* e is UIEvent */ }
);

// MediaQueryList event
useEventListener<'change'>(
  'change',
  (e: MediaQueryListEvent) => { /* ... */ },
  mediaQueryRef
);
```

These overloads allow the hook to infer the correct event type based on the chosen overload and optional explicit generic arguments. The final broad overload accepts any string event and falls back to `Event` when a more specific map does not apply.


# useForkRef (/docs/utils/hooks/use-fork-ref)



```tsx
import { useForkRef } from "@piplup/utils";

function Component({ externalRef }) {
  const localRef = React.useRef(null);
  const combined = useForkRef(localRef, externalRef);

  return <div ref={combined} />;
}
```

## Props [#props]

<TypeTable
  type="{
refs: {
  description: (
    <>
      One or more refs to merge. Each item can be a `RefObject`, a ref
      callback, or `null`/`undefined`.
    </>
  ),
  type: &#x22;(...refs: Array<React.Ref<any> | undefined>) => void&#x22;,
  typeDescription: (
    <>
      Accepts multiple refs and returns a single callback ref that updates
      all provided refs when invoked by React.
    </>
  ),
  required: true,
},
}"
/>

## Return value [#return-value]

<TypeTable
  type="{
combinedRef: {
  description: (
    <>
      A callback ref suitable for assigning to an element's `ref` prop.
      When React calls this callback with the element, all input refs are
      updated to reference that element.
    </>
  ),
  type: &#x22;(instance: T | null) => void&#x22;,
  typeDescription: (
    <>
      Typical usage: `const combined = useForkRef(refA, refB)` 
    </>
  ),
  required: true,
},
}"
/>


# useIsomorphicEffect (/docs/utils/hooks/use-isomorphic-effect)



```tsx
import { useIsomorphicEffect } from "@piplup/utils";

function Component() {
  useIsomorphicEffect(() => {
    // runs like useLayoutEffect in client environments
  }, []);

  return null;
}
```

## Props [#props]

<TypeTable
  type="{
effect: {
  description: (
    <>
      Effect callback that runs like `useLayoutEffect` on the client and
      `useEffect` on the server (no-op for layout semantics server-side).
    </>
  ),
  type: &#x22;() => void | (() => void)&#x22;,
  required: true,
},
deps: {
  description: (
    <>
      Dependency array controlling when the effect re-runs.
    </>
  ),
  type: &#x22;any[]&#x22;,
  required: false,
},
}"
/>


# useLocalStorage (/docs/utils/hooks/use-local-storage)



```tsx
import { useLocalStorage } from "@piplup/utils";

function Component() {
  const [value, setValue] = useLocalStorage('my-key', 'default');

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue('updated')}>Set</button>
    </div>
  );
}
```

## Props [#props]

<TypeTable
  type="{
key: {
  description: (
    <>
      Storage key used to persist the value in `localStorage`.
    </>
  ),
  type: &#x22;string&#x22;,
  required: true,
},
initialValue: {
  description: (
    <>
      Initial value returned when no value exists in storage. If present,
      it is returned as the initial state.
    </>
  ),
  type: &#x22;string | null | (() => string | null)&#x22;,
  required: false,
},
}"
/>

## Return value [#return-value]

<TypeTable
  type="{
value: {
  description: (
    <>
      Current value read from `localStorage` (or `initialValue` when empty).
    </>
  ),
  type: &#x22;string | null&#x22;,
  required: true,
},
setValue: {
  description: (
    <>
      Setter to update the stored value. Accepts a new value or an updater
      function.
    </>
  ),
  type: &#x22;(value: string | null | ((prev: string | null) => string | null)) => void&#x22;,
  required: true,
},
}"
/>


# HtmlButtonElement (/docs/rhf-adapters/html/components/html-button-element)



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

## Import [#import]

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

## Usage [#usage]

### Submit [#submit]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-button-element/submit/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-button-element/submit/form-container.tsx&#x22;,
  },
]"
/>

### Reset [#reset]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-button-element/reset/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-button-element/reset/form-container.tsx&#x22;,
  },
]"
/>

### Button [#button]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-button-element/button/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-button-element/button/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="HtmlButtonElementProps" />

`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 [#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`](../hooks/use-html-button-adapter).

## See also [#see-also]

<Cards>
  <Card title="useHtmlButtonAdapter" href="../hooks/use-html-button-adapter">
    Build a custom button component with the same adapter behavior.
  </Card>

  <Card title="useFormStateAdapter" href="/docs/rhf-core/hooks/use-form-state-adapter">
    Core hook that powers the button adapter's form-state wiring.
  </Card>
</Cards>


# HtmlFormHelperTextElement (/docs/rhf-adapters/html/components/html-form-helper-text-element)



`HtmlFormHelperTextElement` renders helper content for a field and can switch naturally into error messaging based on React Hook Form state.

## Import [#import]

```tsx
import { HtmlFormHelperTextElement } from "@piplup/rhf-adapters/html";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-form-helper-text-element/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-form-helper-text-element/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="HtmlFormHelperTextElementProps" />

`HtmlFormHelperTextElement` accepts paragraph props together with adapter props such as `name`, `control`, and `renderOnError`.

> The `ref` is forwarded to the underlying `<p>` element.

## Notes [#notes]

* Use `renderOnError` when helper text should only appear for validation failures.
* Pair the helper text `id` with an input's `aria-describedby` for better accessibility.
* For bespoke helper text UIs, build on [`useHtmlFormHelperTextAdapter`](../hooks/use-html-form-helper-text-adapter).

## See also [#see-also]

<Cards>
  <Card title="useHtmlFormHelperTextAdapter" href="../hooks/use-html-form-helper-text-adapter">
    Reuse the helper-text adapter logic in a custom component.
  </Card>

  <Card title="useFieldStateAdapter" href="/docs/rhf-core/hooks/use-field-state-adapter">
    Core hook that powers helper text and field-state derivation.
  </Card>
</Cards>


# HtmlFormLabelElement (/docs/rhf-adapters/html/components/html-form-label-element)



`HtmlFormLabelElement` wraps the native `<label>` element and exposes field-state-aware styling without requiring manual state plumbing.

## Import [#import]

```tsx
import { HtmlFormLabelElement } from "@piplup/rhf-adapters/html";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-form-label-element/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-form-label-element/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="HtmlFormLabelElementProps" />

`HtmlFormLabelElement` accepts standard label attributes together with adapter props such as `name`, `control`, and custom state-driven styling.

> The `ref` is forwarded to the underlying `<label>` element.

## Notes [#notes]

* Use `htmlFor` to associate the label with an input `id`.
* The adapter exposes `error`, `disabled`, and helper-text-aware styling composition through field state.
* For custom label components, build on [`useHtmlFormLabelAdapter`](../hooks/use-html-form-label-adapter).

## See also [#see-also]

<Cards>
  <Card title="useHtmlFormLabelAdapter" href="../hooks/use-html-form-label-adapter">
    Reuse label adapter behavior in a custom component.
  </Card>

  <Card title="useFieldStateAdapter" href="/docs/rhf-core/hooks/use-field-state-adapter">
    Core hook that powers label field-state wiring.
  </Card>
</Cards>


# HtmlInputElement (/docs/rhf-adapters/html/components/html-input-element)



`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]

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

## Usage [#usage]

### Text [#text]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/text/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/text/form-container.tsx&#x22;,
  },
]"
/>

### Password [#password]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/password/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/password/form-container.tsx&#x22;,
  },
]"
/>

### Number [#number]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/number/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/number/form-container.tsx&#x22;,
  },
]"
/>

### Email [#email]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/email/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/email/form-container.tsx&#x22;,
  },
]"
/>

### Radio [#radio]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/radio/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/radio/form-container.tsx&#x22;,
  },
]"
/>

### Checkbox [#checkbox]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/checkbox/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/checkbox/form-container.tsx&#x22;,
  },
]"
/>

### Color [#color]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/color/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/color/form-container.tsx&#x22;,
  },
]"
/>

### Range [#range]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/range/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/range/form-container.tsx&#x22;,
  },
]"
/>

### Date [#date]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/date/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/date/form-container.tsx&#x22;,
  },
]"
/>

### Time [#time]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/time/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/time/form-container.tsx&#x22;,
  },
]"
/>

### Date Time Local [#date-time-local]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/datetime-local/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/datetime-local/form-container.tsx&#x22;,
  },
]"
/>

### Month [#month]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/month/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/month/form-container.tsx&#x22;,
  },
]"
/>

### Week [#week]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/week/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/week/form-container.tsx&#x22;,
  },
]"
/>

### File [#file]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/file/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/file/form-container.tsx&#x22;,
  },
]"
/>

### Search [#search]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/search/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/search/form-container.tsx&#x22;,
  },
]"
/>

### Tel [#tel]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/tel/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/tel/form-container.tsx&#x22;,
  },
]"
/>

### URL [#url]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-input-element/url/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-input-element/url/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="HtmlInputElementProps" />

`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 [#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`](../hooks/use-html-input-adapter).

## See also [#see-also]

<Cards>
  <Card title="useHtmlInputAdapter" href="../hooks/use-html-input-adapter">
    Reuse the input adapter logic in your own component.
  </Card>

  <Card title="useControllerAdapter" href="/docs/rhf-core/hooks/use-controller-adapter">
    Core hook that powers controlled field integration.
  </Card>
</Cards>


# HtmlTextareaElement (/docs/rhf-adapters/html/components/html-textarea-element)



`HtmlTextareaElement` connects a native `<textarea>` to React Hook Form while preserving the ergonomics of a regular textarea component.

## Import [#import]

```tsx
import { HtmlTextareaElement } from "@piplup/rhf-adapters/html";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/html/html-textarea-element/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/html/html-textarea-element/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="HtmlTextareaElementProps" />

`HtmlTextareaElement` accepts textarea props together with adapter props such as `control`, `rules`, `messages`, and `transform`.

> The `ref` is forwarded to the underlying `<textarea>` element.

## Notes [#notes]

* Use this component when a field should behave like a regular textarea but still participate in React Hook Form validation and state.
* The component is built on top of `useHtmlTextareaAdapter`.
* For custom multiline inputs, compose directly with [`useHtmlTextareaAdapter`](../hooks/use-html-textarea-adapter).

## See also [#see-also]

<Cards>
  <Card title="useHtmlTextareaAdapter" href="../hooks/use-html-textarea-adapter">
    Build a custom textarea-like component with the same adapter logic.
  </Card>

  <Card title="useControllerAdapter" href="/docs/rhf-core/hooks/use-controller-adapter">
    Core hook that powers textarea field registration and value mapping.
  </Card>
</Cards>


# useHtmlButtonAdapter (/docs/rhf-adapters/html/hooks/use-html-button-adapter)



`useHtmlButtonAdapter` returns normalized button props for building custom button components that respond to React Hook Form state such as submit state, errors, and disabled behavior.

## Import [#import]

```tsx
import { useHtmlButtonAdapter } from "@piplup/rhf-adapters/html";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/html/button/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlButtonAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlButtonAdapterReturnType" />

## Notes [#notes]

* The hook is built on top of `useFormStateAdapter`.
* `type="submit"` and `type="reset"` preserve native form semantics while still allowing adapter-managed disabling.

## See also [#see-also]

* [HtmlButtonElement](/docs/rhf-adapters/html/components/html-button-element)
* [useFormStateAdapter](/docs/rhf-core/hooks/use-form-state-adapter)


# useHtmlFormHelperTextAdapter (/docs/rhf-adapters/html/hooks/use-html-form-helper-text-adapter)



`useHtmlFormHelperTextAdapter` derives helper text content and state from a field so custom helper text components can react to validation without manual field-state wiring.

## Import [#import]

```tsx
import { useHtmlFormHelperTextAdapter } from "@piplup/rhf-adapters/html";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/html/form-helper-text/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlFormHelperTextAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlFormHelperTextAdapterReturnType" />

## Notes [#notes]

* The hook is built on top of `useFieldStateAdapter`.
* Pair the rendered helper text with the field's `aria-describedby` for accessibility.

## See also [#see-also]

* [HtmlFormHelperTextElement](/docs/rhf-adapters/html/components/html-form-helper-text-element)
* [useFieldStateAdapter](/docs/rhf-core/hooks/use-field-state-adapter)


# useHtmlFormLabelAdapter (/docs/rhf-adapters/html/hooks/use-html-form-label-adapter)



`useHtmlFormLabelAdapter` exposes label props and field-state-aware styling inputs for custom label components that should respond to validation and disabled state.

## Import [#import]

```tsx
import { useHtmlFormLabelAdapter } from "@piplup/rhf-adapters/html";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/html/form-label/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlFormLabelAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlFormLabelAdapterReturnType" />

## Notes [#notes]

* Use this hook when you need custom label markup but still want field-state-aware styling.
* The hook is built on top of `useFieldStateAdapter`.
* Pair the rendered label with the target control via `htmlFor` or `aria-labelledby`.

## See also [#see-also]

* [HtmlFormLabelElement](/docs/rhf-adapters/html/components/html-form-label-element)
* [useFieldStateAdapter](/docs/rhf-core/hooks/use-field-state-adapter)


# useHtmlInputAdapter (/docs/rhf-adapters/html/hooks/use-html-input-adapter)



`useHtmlInputAdapter` returns value, event handlers, and field-state-aware props for custom input components that should behave like React Hook Form-controlled fields.

## Import [#import]

```tsx
import { useHtmlInputAdapter } from "@piplup/rhf-adapters/html";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/html/input/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlInputAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlInputAdapterReturnType" />

## Notes [#notes]

* Use this hook for bespoke input components that still need React Hook Form registration and value synchronization.
* The hook is built on top of `useControllerAdapter`.
* `transform`, `checked`, and `indeterminate` are useful when DOM values do not match your stored form value exactly.

## See also [#see-also]

* [HtmlInputElement](/docs/rhf-adapters/html/components/html-input-element)
* [useControllerAdapter](/docs/rhf-core/hooks/use-controller-adapter)


# useHtmlTextareaAdapter (/docs/rhf-adapters/html/hooks/use-html-textarea-adapter)



`useHtmlTextareaAdapter` exposes the value, events, and field-state-aware props needed to build a custom textarea component on top of React Hook Form.

## Import [#import]

```tsx
import { useHtmlTextareaAdapter } from "@piplup/rhf-adapters/html";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/html/textarea/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlTextareaAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseHtmlTextareaAdapterReturnType" />

## Notes [#notes]

* Use this hook when a custom multiline input should still participate in React Hook Form validation and state management.
* The hook is built on top of `useControllerAdapter`.
* It is a textarea-specific variant of the HTML input adapter with checkbox- and type-specific props removed.

## See also [#see-also]

* [HtmlTextareaElement](/docs/rhf-adapters/html/components/html-textarea-element)
* [useControllerAdapter](/docs/rhf-core/hooks/use-controller-adapter)


# MuiChipsInputElement (/docs/rhf-adapters/mui-chips-input/components/mui-chips-input-element)



## Import [#import]

```tsx
import { MuiChipsInputElement } from "@piplup/rhf-adapters/mui-chips-input";
```

## Usage [#usage]

<Demo
  tabs="[
  { label: &#x22;useForm&#x22;, path: &#x22;demo/adapters/mui-chips-input/use-form.tsx&#x22; },
  { label: &#x22;FormContainer&#x22;, path: &#x22;demo/adapters/mui-chips-input/form-container.tsx&#x22; },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiChipsInputElementProps" />

## Notes [#notes]

* Use this component when the field value is an array of strings.
* For custom chip inputs, build on `useMuiChipsInputAdapter`.


# useMuiChipsInputAdapter (/docs/rhf-adapters/mui-chips-input/hooks/use-mui-chips-input-adapter)



## Import [#import]

```tsx
import { useMuiChipsInputAdapter } from "@piplup/rhf-adapters/mui-chips-input";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-chips-input/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiChipsInputAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiChipsInputAdapterReturnType" />

## Notes [#notes]

* Use this hook for custom chip inputs that still need `react-hoook-form` controlled value handling.
* It builds on `useControllerAdapter`.


# MuiColorInputElement (/docs/rhf-adapters/mui-color-input/components/mui-color-input-element)



## Import [#import]

```tsx
import { MuiColorInputElement } from "@piplup/rhf-adapters/mui-color-input";
```

## Usage [#usage]

<Demo
  tabs="[
  { label: &#x22;useForm&#x22;, path: &#x22;demo/adapters/mui-color-input/use-form.tsx&#x22; },
  { label: &#x22;FormContainer&#x22;, path: &#x22;demo/adapters/mui-color-input/form-container.tsx&#x22; },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiColorInputElementProps" />

## Notes [#notes]

* Use this component when the form value should stay synchronized with a color input widget.
* For custom color inputs, build on `useMuiColorInputAdapter`.


# useMuiColorInputAdapter (/docs/rhf-adapters/mui-color-input/hooks/use-mui-color-input-adapter)



## Import [#import]

```tsx
import { useMuiColorInputAdapter } from "@piplup/rhf-adapters/mui-color-input";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-color-input/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiColorInputAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiColorInputAdapterReturnType" />

## Notes [#notes]

* Use this hook for custom color inputs that still need RHF-controlled field state.
* It builds on `useControllerAdapter`.


# MuiFileInputElement (/docs/rhf-adapters/mui-file-input/components/mui-file-input-element)



## Import [#import]

```tsx
import { MuiFileInputElement } from "@piplup/rhf-adapters/mui-file-input";
```

## Usage [#usage]

<Demo
  tabs="[
  { label: &#x22;useForm&#x22;, path: &#x22;demo/adapters/mui-file-input/use-form.tsx&#x22; },
  { label: &#x22;FormContainer&#x22;, path: &#x22;demo/adapters/mui-file-input/form-container.tsx&#x22; },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiFileInputElementProps" />

## Notes [#notes]

* Use this component for single-file or multi-file RHF fields.
* For custom file inputs, build on `useMuiFileInputAdapter`.


# useMuiFileInputAdapter (/docs/rhf-adapters/mui-file-input/hooks/use-mui-file-input-adapter)



## Import [#import]

```tsx
import { useMuiFileInputAdapter } from "@piplup/rhf-adapters/mui-file-input";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-file-input/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFileInputAdapterProps" />

## Return value [#return-value]

* Return value: adapter props including `value`, `multiple`, `onChange`, `onBlur`, `inputRef`, `error`, and `helperText`.

## Notes [#notes]

* Use this hook when your file picker UI is custom but should still be RHF-aware.
* It builds on `useControllerAdapter`.


# MuiAutocompleteElement (/docs/rhf-adapters/mui-material/components/mui-autocomplete-element)



## Import [#import]

```tsx
import { MuiAutocompleteElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/autocomplete/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/autocomplete/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiAutocompleteElementProps" />

`MuiAutocompleteElement` supports all standard props of the MUI Autocomplete component, along with additional adapter-specific props. For a complete list of available Autocomplete properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/autocomplete/).

> The `ref` is forwarded to the underlying `<Autocomplete />` component.

## Notes [#notes]

* Use this component when MUI Autocomplete should behave like an `react-hook-form` controlled field.
* For custom autocomplete UIs, build on `useMuiAutocompleteAdapter`.

## See also [#see-also]

* [useMuiAutocompleteAdapter](/docs/rhf-adapters/hooks/use-mui-autocomplete-adapter)
* [useControllerAdapter](/docs/rhf-core/hooks/use-controller-adapter)
* [Autocomplete](https://mui.com/material-ui/api/autocomplete/)


# MuiButtonElement (/docs/rhf-adapters/mui-material/components/mui-button-element)



## Import [#import]

```tsx
import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/button/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/button/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiButtonElementProps" />

`MuiButtonElement` supports all standard props of the MUI Button component, along with additional adapter-specific props. For a complete list of available Button properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/button/).

> The `ref` is forwarded to the underlying `<Button />` component.

## Notes [#notes]

* Use this component for submit, reset, and form-state-aware button actions.
* For custom button UIs, build on `useMuiButtonAdapter`.

## See also [#see-also]

* [useMuiButtonAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-button-adapter)
* [useHtmlButtonAdapter](/docs/rhf-adapters/html/hooks/use-html-button-adapter)
* [Button](https://mui.com/material-ui/api/button/)


# MuiCheckboxElement (/docs/rhf-adapters/mui-material/components/mui-checkbox-element)



## Import [#import]

```tsx
import { MuiCheckboxElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/checkbox/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/checkbox/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiCheckboxElementProps" />

`MuiCheckboxElement` supports all standard props of the MUI Checkbox component, along with additional adapter-specific props. For a complete list of available Checkbox properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/checkbox/).

> The `ref` is forwarded to the underlying `<Fab />` component.

## Notes [#notes]

* For custom checkbox UIs, build on `useMuiCheckboxAdapter`.
* `MuiCheckboxElement` always expects the input value to be an array. Use transform.input and transform.output when working with values that are not arrays.

## See also [#see-also]

* [useMuiCheckboxAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-checkbox-adapter)
* [Checkbox](https://mui.com/material-ui/api/checkbox/)


# MuiFabElement (/docs/rhf-adapters/mui-material/components/mui-fab-element)



## Import [#import]

```tsx
import { MuiFabElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/fab/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/fab/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiFabElementProps" />

`MuiFabElement` supports all standard props of the MUI Fab component, along with additional adapter-specific props. For a complete list of available Fab properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/fab/).

> The `ref` is forwarded to the underlying `<Fab />` component.

## Notes [#notes]

* For custom FAB UIs, build on `useMuiFabAdapter`.

## See also [#see-also]

* [useMuiFabAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-fab-adapter)
* [Fab](https://mui.com/material-ui/api/fab/)


# MuiFilledInputElement (/docs/rhf-adapters/mui-material/components/mui-filled-input-element)



## Import [#import]

```tsx
import { MuiFilledInputElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/filled-input/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/filled-input/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiFilledInputElementProps" />

`MuiFilledInputElement` supports all standard props of the MUI FilledInput component, along with additional adapter-specific props. For a complete list of available FilledInput properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/filled-input/).

> The `ref` is forwarded to the underlying `<FilledInput />` component.

## Notes [#notes]

* For custom filled-input UIs, build on `useMuiFilledInputAdapter`.

## See also [#see-also]

* [useMuiFilledInputAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-filled-input-adapter)
* [FilledInput](https://mui.com/material-ui/api/filled-input/)


# MuiFormHelperTextElement (/docs/rhf-adapters/mui-material/components/mui-form-helper-text-element)



## Import [#import]

```tsx
import { MuiFormHelperTextElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/form-helper-text/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/form-helper-text/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiFormHelperTextElementProps" />

`MuiFormHelperTextElement` supports all standard props of the MUI FormHelperText component, along with additional adapter-specific props. For a complete list of available FormHelperText properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/form-helper-text/).

> The `ref` is forwarded to the underlying `<FormHelperText />` component.

## Notes [#notes]

* For custom helper-text UIs, build on `useMuiFormHelperTextAdapter`.

## See also [#see-also]

* [useMuiFormHelperTextAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-form-helper-text-adapter)
* [FormHelperText](https://mui.com/material-ui/api/form-helper-text/)


# MuiFormLabelElement (/docs/rhf-adapters/mui-material/components/mui-form-label-element)



## Import [#import]

```tsx
import { MuiFormLabelElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/form-label/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/form-label/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiFormLabelElementProps" />

`MuiFormLabelElement` supports props of the MUI FormLabel component, along with additional adapter-specific props. For a complete list of available FormLabel properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/form-label/).

> The `ref` is forwarded to the underlying `<FormLabel />` component.

## Notes [#notes]

* For custom label UIs, build on `useMuiFormLabelAdapter`.

## See also [#see-also]

* [useMuiFormLabelAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-form-label-adapter)
* [FormLabel](https://mui.com/material-ui/api/form-label/)


# MuiIconButtonElement (/docs/rhf-adapters/mui-material/components/mui-icon-button-element)



## Import [#import]

```tsx
import { MuiIconButtonElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/icon-button/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/icon-button/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiIconButtonElementProps" />

`MuiIconButtonElement` supports props of the MUI IconButton component, along with additional adapter-specific props. For a complete list of available IconButton properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/icon-button/).

> The `ref` is forwarded to the underlying `<IconButton />` component.

## Notes [#notes]

* For custom icon button UIs, build on `useMuiIconButtonAdapter`.

## See also [#see-also]

* [useMuiIconButtonAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-icon-button-adapter)
* [IconButton](https://mui.com/material-ui/api/icon-button/)


# MuiInputBaseElement (/docs/rhf-adapters/mui-material/components/mui-input-base-element)



## Import [#import]

```tsx
import { MuiInputBaseElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/input-base/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/input-base/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiInputBaseElementProps" />

`MuiInputBaseElement` supports props of the MUI InputBase component, along with additional adapter-specific props. For a complete list of available InputBase properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/input-base/).

> The `ref` is forwarded to the underlying `<InputBase />` component.

## Notes [#notes]

* For custom InputBase UIs, build on `useMuiInputBaseAdapter`.

## See also [#see-also]

* [useMuiInputBaseAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-input-base-adapter)
* [InputBase](https://mui.com/material-ui/api/input-base/)


# MuiInputElement (/docs/rhf-adapters/mui-material/components/mui-input-element)



## Import [#import]

```tsx
import { MuiInputElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/input/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/input/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiInputElementProps" />

`MuiInputElement` supports props of the MUI Input component, along with additional adapter-specific props. For a complete list of available Input properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/input/).

> The `ref` is forwarded to the underlying `<Input />` component.

## Notes [#notes]

* Use this component for standard MUI input fields managed by RHF.
* For custom input UIs, build on `useMuiInputAdapterProps`.

## See also [#see-also]

* [useMuiInputAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-input-adapter)
* [Input](https://mui.com/material-ui/api/input/)


# MuiInputLabelElement (/docs/rhf-adapters/mui-material/components/mui-input-label-element)



## Import [#import]

```tsx
import { MuiInputLabelElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/input-label/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/input-label/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiInputLabelElementProps" />

`MuiInputLabelElement` supports props of the MUI InputLabel component, along with additional adapter-specific props. For a complete list of available InputLabel properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/input-label/).

> The `ref` is forwarded to the underlying `<InputLabel />` component.

## Notes [#notes]

* Use this component when MUI InputLabel should react to RHF field state.
* For custom input-label UIs, build on `useMuiInputLabelAdapter`.

## See also [#see-also]

* [useMuiInputLabelAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-input-label-adapter)
* [InputLabel](https://mui.com/material-ui/api/input-label/)


# MuiOutlinedInputElement (/docs/rhf-adapters/mui-material/components/mui-outlined-input-element)



## Import [#import]

```tsx
import { MuiOutlinedInputElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/outlined-input/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/outlined-input/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiOutlinedInputElementProps" />

`MuiOutlinedInputElement` supports props of the MUI OutlinedInput component, along with additional adapter-specific props. For a complete list of available InputLabel properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/outlined-input/).

> The `ref` is forwarded to the underlying `<OutlinedInput />` component.

## Notes [#notes]

* For custom outlined-input UIs, build on `useMuiOutlinedInputAdapter`.

## See also [#see-also]

* [useMuiOutlinedInputAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-outlined-input-adapter)
* [OutlinedInput](https://mui.com/material-ui/api/outlined-input/)


# MuiRadioElement (/docs/rhf-adapters/mui-material/components/mui-radio-element)



## Import [#import]

```tsx
import { MuiRadioElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/radio/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/radio/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiRadioElementProps" />

`MuiRadioElement` supports props of the MUI Radio component, along with additional adapter-specific props. For a complete list of available Radio properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/radio/).

> The `ref` is forwarded to the underlying `<Radio />` component.

## Notes [#notes]

* For custom radio UIs, build on `useMuiRadioAdapter`.

## See also [#see-also]

* [useMuiRadioAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-radio-adapter)
* [Radio](https://mui.com/material-ui/api/radio/)


# MuiRadioGroupElement (/docs/rhf-adapters/mui-material/components/mui-radio-group-element)



## Import [#import]

```tsx
import { MuiRadioGroupElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/radio-group/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/radio-group/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiRadioGroupElementProps" />

`MuiRadioGroupElement` supports props of the MUI RadioGroup component, along with additional adapter-specific props. For a complete list of available RadioGroup properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/radio-group/).

> The `ref` is forwarded to the underlying `<RadioGroup />` component.

## Notes [#notes]

* For custom radio-group UIs, build on `useMuiRadioGroupAdapter`.

## See also [#see-also]

* [useMuiRadioGroupAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-radio-group-adapter)
* [RadioGroup](https://mui.com/material-ui/api/radio-group/)


# MuiRatingElement (/docs/rhf-adapters/mui-material/components/mui-rating-element)



## Import [#import]

```tsx
import { MuiRatingElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/rating/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/rating/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiRatingElementProps" />

`MuiRatingElement` supports props of the MUI Rating component, along with additional adapter-specific props. For a complete list of available Rating properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/rating/).

> The `ref` is forwarded to the underlying `<Rating />` component.

## Notes [#notes]

* For custom rating UIs, build on `useMuiRatingAdapter`.

## See also [#see-also]

* [useMuiRatingAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-rating-adapter)
* [Rating](https://mui.com/material-ui/api/rating/)


# MuiSelectElement (/docs/rhf-adapters/mui-material/components/mui-select-element)



## Import [#import]

```tsx
import { MuiSelectElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/select/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/select/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiSelectElementProps" />

`MuiSelectElement` supports props of the MUI Select component, along with additional adapter-specific props. For a complete list of available Select properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/select/).

> The `ref` is forwarded to the underlying `<Select />` component.

## Notes [#notes]

* For custom select UIs, build on `useMuiSelectAdapter`.

## See also [#see-also]

* [useMuiSelectAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-select-adapter)
* [Select](https://mui.com/material-ui/api/select/)


# MuiSliderElement (/docs/rhf-adapters/mui-material/components/mui-slider-element)



## Import [#import]

```tsx
import { MuiSliderElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/slider/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/slider/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiSliderElementProps" />

`MuiSliderElement` supports props of the MUI Slider component, along with additional adapter-specific props. For a complete list of available Slider properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/slider/).

> The `ref` is forwarded to the underlying `<Slider />` component.

## Notes [#notes]

* For custom slider UIs, build on `useMuiSliderAdapter`.

## See also [#see-also]

* [useMuiSliderAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-slider-adapter)
* [Slider](https://mui.com/material-ui/api/slider/)


# MuiSwitchElement (/docs/rhf-adapters/mui-material/components/mui-switch-element)



## Import [#import]

```tsx
import { MuiSwitchElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/switch/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/switch/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiSwitchElementProps" />

`MuiSwitchElement` supports props of the MUI Switch component, along with additional adapter-specific props. For a complete list of available Switch properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/switch/).

> The `ref` is forwarded to the underlying `<Switch />` component.

## Notes [#notes]

* For custom switch UIs, build on `useMuiSwitchAdapter`.

## See also [#see-also]

* [useMuiSwitchAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-switch-adapter)
* [Switch](https://mui.com/material-ui/api/switch/)


# MuiTextFieldElement (/docs/rhf-adapters/mui-material/components/mui-text-field-element)



## Import [#import]

```tsx
import { MuiTextFieldElement } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-material/text-field/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-material/text-field/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiTextFieldElementProps" />

`MuiTextFieldElement` supports props of the MUI TextField component, along with additional adapter-specific props. For a complete list of available TextField properties, refer to the MUI [API documentation](https://mui.com/material-ui/api/text-field/).

> The `ref` is forwarded to the underlying `<TextField />` component.

## Notes [#notes]

* For custom text field UIs, build on `useMuiTextFieldAdapter`.

## See also [#see-also]

* [useMuiTextFieldAdapter](/docs/rhf-adapters/mui-material/hooks/use-mui-text-field-adapter)
* [TextField](https://mui.com/material-ui/api/text-field/)


# useMuiAutocompleteAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-autocomplete-adapter)



## Import [#import]

```tsx
import { useMuiAutocompleteAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/autocomplete/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiAutocompleteAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiAutocompleteAdapterReturnType" />


# useMuiButtonAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-button-adapter)



## Import [#import]

```tsx
import { useMuiButtonAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/button/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiButtonAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiButtonAdapterReturnType" />


# useMuiCheckboxAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-checkbox-adapter)



## Import [#import]

```tsx
import { useMuiCheckboxAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/checkbox/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiCheckboxAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiCheckboxAdapterReturnType" />


# useMuiFabAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-fab-adapter)



## Import [#import]

```tsx
import { useMuiFabAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/fab/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFabAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFabAdapterReturnType" />


# useMuiFilledInputAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-filled-input-adapter)



## Import [#import]

```tsx
import { useMuiFilledInputAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/filled-input/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFilledInputAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFilledInputAdapterReturnType" />


# useMuiFormHelperTextAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-form-helper-text-adapter)



## Import [#import]

```tsx
import { useMuiFormHelperTextAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/form-helper-text/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFormHelperTextAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFormHelperTextAdapterReturnType" />


# useMuiFormLabelAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-form-label-adapter)



## Import [#import]

```tsx
import { useMuiFormLabelAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/button/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFormLabelAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiFormLabelAdapterReturnType" />


# useMuiIconButtonAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-icon-button-adapter)



## Import [#import]

```tsx
import { useMuiIconButtonAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/icon-button/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiIconButtonAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiIconButtonAdapterReturnType" />


# useMuiInputAdapterProps (/docs/rhf-adapters/mui-material/hooks/use-mui-input-adapter-props)



## Import [#import]

```tsx
import { useMuiInputAdapterProps } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/input/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiInputAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiInputAdapterReturnType" />


# useMuiInputBaseAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-input-base-adapter)



## Import [#import]

```tsx
import { useMuiInputBaseAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/input-base/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiInputBaseAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiInputBaseAdapterReturnType" />


# useMuiInputLabelAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-input-label-adapter)



## Import [#import]

```tsx
import { useMuiInputLabelAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/input-label/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiInputLabelAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiInputLabelAdapterReturnType" />


# useMuiOutlinedInputAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-outlined-input-adapter)



## Import [#import]

```tsx
import { useMuiOutlinedInputAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/outlined-input/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiOutlinedInputAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiOutlinedInputAdapterReturnType" />


# useMuiRadioAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-radio-adapter)



## Import [#import]

```tsx
import { useMuiRadioAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/radio/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiRadioAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiRadioAdapterReturnType" />


# useMuiRadioGroupAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-radio-group-adapter)



## Import [#import]

```tsx
import { useMuiRadioGroupAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/radio-group/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiRadioGroupAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiRadioGroupAdapterReturnType" />


# useMuiRatingAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-rating-adapter)



## Import [#import]

```tsx
import { useMuiRatingAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/rating/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiRatingAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiRatingAdapterReturnType" />


# useMuiSelectAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-select-adapter)



## Import [#import]

```tsx
import { useMuiSelectAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/select/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiSelectAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiSelectAdapterReturnType" />


# useMuiSliderAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-slider-adapter)



## Import [#import]

```tsx
import { useMuiSliderAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/slider/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiSliderAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiSliderAdapterReturnType" />


# useMuiSwitchAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-switch-adapter)



## Import [#import]

```tsx
import { useMuiSwitchAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/switch/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiSwitchAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiSwitchAdapterReturnType" />


# useMuiTextFieldAdapter (/docs/rhf-adapters/mui-material/hooks/use-mui-text-field-adapter)



## Import [#import]

```tsx
import { useMuiTextFieldAdapter } from "@piplup/rhf-adapters/mui-material";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-material/textfield/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiTextFieldAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiTextFieldAdapterReturnType" />


# MuiOtpInputElement (/docs/rhf-adapters/mui-one-time-password-input/components/mui-otp-input-element)



## Import [#import]

```tsx
import { MuiOtpInputElement } from "@piplup/rhf-adapters/mui-one-time-password-input";
```

## Usage [#usage]

<Demo
  tabs="[
  { label: &#x22;useForm&#x22;, path: &#x22;demo/adapters/mui-one-time-password-input/use-form.tsx&#x22; },
  { label: &#x22;FormContainer&#x22;, path: &#x22;demo/adapters/mui-one-time-password-input/form-container.tsx&#x22; },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiOtpInputElementProps" />

## Notes [#notes]

* Use this component for OTP and verification flows that store a single string value.
* For custom OTP inputs, build on `useMuiOtpInputAdapter`.


# useMuiOtpInputAdapter (/docs/rhf-adapters/mui-one-time-password-input/hooks/use-mui-otp-input-adapter)



## Import [#import]

```tsx
import { useMuiOtpInputAdapter } from "@piplup/rhf-adapters/mui-one-time-password-input";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;Code&#x22;,
    path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-one-time-password-input/element.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiOtpInputAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiOtpInputAdapterReturnType" />

## Notes [#notes]

* Use this hook when you need custom OTP field presentation while keeping RHF wiring.
* It builds on `useControllerAdapter`.


# MuiTelInputElement (/docs/rhf-adapters/mui-tel-input/components/mui-tel-input-element)



## Import [#import]

```tsx
import { MuiTelInputElement } from "@piplup/rhf-adapters/mui-tel-input";
```

## Usage [#usage]

<Demo
  tabs="[
  { label: &#x22;useForm&#x22;, path: &#x22;demo/adapters/mui-tel-input/use-form.tsx&#x22; },
  { label: &#x22;FormContainer&#x22;, path: &#x22;demo/adapters/mui-tel-input/form-container.tsx&#x22; },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiTelInputElementProps" />

## Notes [#notes]

* Use this component for international phone-number input managed by RHF.
* For custom telephone inputs, build on `useMuiTelInputAdapter`.


# useMuiTelInputAdapter (/docs/rhf-adapters/mui-tel-input/hooks/use-mui-tel-input-adapter)



## Import [#import]

```tsx
import { useMuiTelInputAdapter } from "@piplup/rhf-adapters/mui-tel-input";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-tel-input/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiTelInputAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiTelInputAdapterReturnType" />

## Notes [#notes]

* Use this hook when your telephone UI is custom but should still integrate with RHF.
* It builds on `useControllerAdapter`.


# MuiXDateCalendarElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-date-calendar-element)



## Import [#import]

```tsx
import { MuiXDateCalendarElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/date-calendar/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/date-calendar/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXDateCalendarElementProps" />

`MuiXDateCalendarElement` supports all standard props of the MUI X DateCalendar component, along with additional adapter-specific props. For a complete list of available DateCalendar properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/date-calendar/).

> The `ref` is forwarded to the underlying `<DateCalendar />` component.

## Notes [#notes]

* For custom calendar UIs, build on `useMuiXDateCalendarAdapter`.

## See also [#see-also]

* [useMuiXDateCalendarAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-date-calendar-adapter)
* [DateCalendar](https://mui.com/x/api/date-pickers/date-calendar/)


# MuiXDateFieldElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-date-field-element)



## Import [#import]

```tsx
import { MuiXDateFieldElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/date-field/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/date-field/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXDateFieldElementProps" />

`MuiXDateFieldElement` supports all standard props of the MUI X DateField component, along with additional adapter-specific props. For a complete list of available DateField properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/date-field/).

> The `ref` is forwarded to the underlying `<DateField />` component.

## Notes [#notes]

* For custom date fields, build on `useMuiXDateFieldAdapter`.

## See also [#see-also]

* [useMuiXDateFieldAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-date-field-adapter)
* [DateField](https://mui.com/x/api/date-pickers/date-field/)


# MuiXDatePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-date-picker-element)



## Import [#import]

```tsx
import { MuiXDatePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/date-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/date-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXDatePickerElementProps" />

`MuiXDatePickerElement` supports all standard props of the MUI X DatePicker component, along with additional adapter-specific props. For a complete list of available DatePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/date-picker/).

> The `ref` is forwarded to the underlying `<DatePicker />` component.

## Notes [#notes]

* For custom picker UIs, build on `useMuiXDatePickerAdapter`.

## See also [#see-also]

* [useMuiXDatePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-date-picker-adapter)
* [DatePicker](https://mui.com/x/api/date-pickers/date-picker/)


# MuiXDateTimePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-date-time-picker-element)



## Import [#import]

```tsx
import { MuiXDateTimePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/date-time-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/date-time-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXDateTimePickerElementProps" />

`MuiXDateTimePickerElement` supports all standard props of the MUI X DateTimePicker component, along with additional adapter-specific props. For a complete list of available DateTimePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/date-time-picker/).

> The `ref` is forwarded to the underlying `<DateTimePicker />` component.

## Notes [#notes]

* For custom date-time pickers, build on `useMuiXDateTimePickerAdapter`.

## See also [#see-also]

* [useMuiXDateTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-date-time-picker-adapter)
* [DateTimePicker](https://mui.com/x/api/date-pickers/date-time-picker/)


# MuiXDesktopDatePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-desktop-date-picker-element)



## Import [#import]

```tsx
import { MuiXDesktopDatePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/desktop-date-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/desktop-date-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXDesktopDatePickerElementProps" />

`MuiXDesktopDatePickerElement` supports all standard props of the MUI X DesktopDatePicker component, along with additional adapter-specific props. For a complete list of available DesktopDatePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/desktop-date-picker/).

> The `ref` is forwarded to the underlying `<DesktopDatePicker />` component.

## Notes [#notes]

* For custom desktop date pickers, build on `useMuiXDesktopDatePickerAdapter`.

## See also [#see-also]

* [useMuiXDesktopDatePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-desktop-date-picker-adapter)
* [DesktopDatePicker](https://mui.com/x/api/date-pickers/desktop-date-picker/)


# MuiXDesktopDateTimePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-desktop-date-time-picker-element)



## Import [#import]

```tsx
import { MuiXDesktopDateTimePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/desktop-date-time-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/desktop-date-time-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXDesktopDateTimePickerElementProps" />

`MuiXDesktopDateTimePickerElement` supports all standard props of the MUI X DesktopDateTimePicker component, along with additional adapter-specific props. For a complete list of available DesktopDateTimePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/desktop-date-time-picker/).

> The `ref` is forwarded to the underlying `<DesktopDateTimePicker />` component.

## Notes [#notes]

* For custom desktop date-time pickers, build on `useMuiXDesktopDateTimePickerAdapter`.

## See also [#see-also]

* [useMuiXDesktopDateTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-desktop-date-time-picker-adapter)
* [DesktopDateTimePicker](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)


# MuiXDesktopTimePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-desktop-time-picker-element)



## Import [#import]

```tsx
import { MuiXDesktopTimePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/desktop-time-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/desktop-time-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXDesktopTimePickerElementProps" />

`MuiXDesktopTimePickerElement` supports all standard props of the MUI X DesktopTimePicker component, along with additional adapter-specific props. For a complete list of available DesktopTimePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/desktop-time-picker/).

> The `ref` is forwarded to the underlying `<DesktopTimePicker />` component.

## Notes [#notes]

* For custom desktop time pickers, build on `useMuiXDesktopTimePickerAdapter`.

## See also [#see-also]

* [useMuiXDesktopTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-desktop-time-picker-adapter)
* [DesktopTimePicker](https://mui.com/x/api/date-pickers/desktop-time-picker/)


# MuiXDigitalClockElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-digital-clock-element)



## Import [#import]

```tsx
import { MuiXDigitalClockElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/digital-clock/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/digital-clock/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXDigitalClockElementProps" />

`MuiXDigitalClockElement` supports all standard props of the MUI X DigitalClock component, along with additional adapter-specific props. For a complete list of available DigitalClock properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/digital-clock/).

> The `ref` is forwarded to the underlying `<DigitalClock />` component.

## Notes [#notes]

* For custom clock UIs, build on `useMuiXDigitalClockAdapter`.

## See also [#see-also]

* [useMuiXDigitalClockAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-digital-clock-adapter)
* [DigitalClock](https://mui.com/x/api/date-pickers/digital-clock/)


# MuiXMobileDatePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-mobile-date-picker-element)



## Import [#import]

```tsx
import { MuiXMobileDatePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/mobile-date-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/mobile-date-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXMobileDatePickerElementProps" />

`MuiXMobileDatePickerElement` supports all standard props of the MUI X MobileDatePicker component, along with additional adapter-specific props. For a complete list of available MobileDatePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/mobile-date-picker/).

> The `ref` is forwarded to the underlying `<MobileDatePicker />` component.

## Notes [#notes]

* For custom mobile date pickers, build on `useMuiXMobileDatePickerAdapter`.

## See also [#see-also]

* [useMuiXMobileDatePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-mobile-date-picker-adapter)
* [MobileDatePicker](https://mui.com/x/api/date-pickers/mobile-date-picker/)


# MuiXMobileDateTimePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-mobile-date-time-picker-element)



## Import [#import]

```tsx
import { MuiXMobileDateTimePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/mobile-date-time-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/mobile-date-time-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXMobileDateTimePickerElementProps" />

`MuiXMobileDateTimePickerElement` supports all standard props of the MUI X MobileDateTimePicker component, along with additional adapter-specific props. For a complete list of available MobileDateTimePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/mobile-date-time-picker/).

> The `ref` is forwarded to the underlying `<MobileDateTimePicker />` component.

## Notes [#notes]

* For custom mobile date-time pickers, build on `useMuiXMobileDateTimePickerAdapter`.

## See also [#see-also]

* [useMuiXMobileDateTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-mobile-date-time-picker-adapter)
* [MobileDateTimePicker](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)


# MuiXMobileTimePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-mobile-time-picker-element)



## Import [#import]

```tsx
import { MuiXMobileTimePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/mobile-time-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/mobile-time-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXMobileTimePickerElementProps" />

`MuiXMobileTimePickerElement` supports all standard props of the MUI X MobileTimePicker component, along with additional adapter-specific props. For a complete list of available MobileTimePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/mobile-time-picker/).

> The `ref` is forwarded to the underlying `<MobileTimePicker />` component.

## Notes [#notes]

* For custom mobile time pickers, build on `useMuiXMobileTimePickerAdapter`.

## See also [#see-also]

* [useMuiXMobileTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-mobile-time-picker-adapter)
* [MobileTimePicker](https://mui.com/x/api/date-pickers/mobile-time-picker/)


# MuiXMonthCalendarElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-month-calendar-element)



## Import [#import]

```tsx
import { MuiXMonthCalendarElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/month-calendar/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/month-calendar/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXMonthCalendarElementProps" />

`MuiXMonthCalendarElement` supports all standard props of the MUI X MonthCalendar component, along with additional adapter-specific props. For a complete list of available MonthCalendar properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/month-calendar/).

> The `ref` is forwarded to the underlying `<MonthCalendar />` component.

## Notes [#notes]

* For custom month calendars, build on `useMuiXMonthCalendarAdapter`.

## See also [#see-also]

* [useMuiXMonthCalendarAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-month-calendar-adapter)
* [MonthCalendar](https://mui.com/x/api/date-pickers/month-calendar/)


# MuiXMultiSectionDigitalClockElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-multi-section-digital-clock-element)



## Import [#import]

```tsx
import { MuiXMultiSectionDigitalClockElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/multi-section-digital-clock/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/multi-section-digital-clock/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXMultiSectionDigitalClockElementProps" />

`MuiXMultiSectionDigitalClockElement` supports all standard props of the MUI X MultiSectionDigitalClock component, along with additional adapter-specific props. For a complete list of available MultiSectionDigitalClock properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/multi-section-digital-clock/).

> The `ref` is forwarded to the underlying `<MultiSectionDigitalClock />` component.

## Notes [#notes]

* For custom segmented clock UIs, build on `useMuiXMultiSectionDigitalClockAdapter`.

## See also [#see-also]

* [useMuiXMultiSectionDigitalClockAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-multi-section-digital-clock-adapter)
* [MultiSectionDigitalClock](https://mui.com/x/api/date-pickers/multi-section-digital-clock/)


# MuiXStaticDatePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-static-date-picker-element)



## Import [#import]

```tsx
import { MuiXStaticDatePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/static-date-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/static-date-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXStaticDatePickerElementProps" />

`MuiXStaticDatePickerElement` supports all standard props of the MUI X StaticDatePicker component, along with additional adapter-specific props. For a complete list of available StaticDatePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/static-date-picker/).

> The `ref` is forwarded to the underlying `<StaticDatePicker />` component.

## Notes [#notes]

* For custom static date pickers, build on `useMuiXStaticDatePickerAdapter`.

## See also [#see-also]

* [useMuiXStaticDatePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-static-date-picker-adapter)
* [StaticDatePicker](https://mui.com/x/api/date-pickers/static-date-picker/)


# MuiXStaticDateTimePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-static-date-time-picker-element)



## Import [#import]

```tsx
import { MuiXStaticDateTimePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/static-date-time-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/static-date-time-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXStaticDateTimePickerElementProps" />

`MuiXStaticDateTimePickerElement` supports all standard props of the MUI X StaticDateTimePicker component, along with additional adapter-specific props. For a complete list of available StaticDateTimePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/static-date-time-picker/).

> The `ref` is forwarded to the underlying `<StaticDateTimePicker />` component.

## Notes [#notes]

* For custom static date-time pickers, build on `useMuiXStaticDateTimePickerAdapter`.

## See also [#see-also]

* [useMuiXStaticDateTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-static-date-time-picker-adapter)
* [StaticDateTimePicker](https://mui.com/x/api/date-pickers/static-date-time-picker/)


# MuiXStaticTimePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-static-time-picker-element)



## Import [#import]

```tsx
import { MuiXStaticTimePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/static-time-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/static-time-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXStaticTimePickerElementProps" />

`MuiXStaticTimePickerElement` supports all standard props of the MUI X StaticTimePicker component, along with additional adapter-specific props. For a complete list of available StaticTimePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/static-time-picker/).

> The `ref` is forwarded to the underlying `<StaticTimePicker />` component.

## Notes [#notes]

* For custom static time pickers, build on `useMuiXStaticTimePickerAdapter`.

## See also [#see-also]

* [useMuiXStaticTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-static-time-picker-adapter)
* [StaticTimePicker](https://mui.com/x/api/date-pickers/static-time-picker/)


# MuiXTimeClockElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-time-clock-element)



## Import [#import]

```tsx
import { MuiXTimeClockElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/time-clock/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/time-clock/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXTimeClockElementProps" />

`MuiXTimeClockElement` supports all standard props of the MUI X TimeClock component, along with additional adapter-specific props. For a complete list of available TimeClock properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/time-clock/).

> The `ref` is forwarded to the underlying `<TimeClock />` component.

## Notes [#notes]

* For custom time-clock UIs, build on `useMuiXTimeClockAdapter`.

## See also [#see-also]

* [useMuiXTimeClockAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-time-clock-adapter)
* [TimeClock](https://mui.com/x/api/date-pickers/time-clock/)


# MuiXTimeFieldElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-time-field-element)



## Import [#import]

```tsx
import { MuiXTimeFieldElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/time-field/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/time-field/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXTimeFieldElementProps" />

`MuiXTimeFieldElement` supports all standard props of the MUI X TimeField component, along with additional adapter-specific props. For a complete list of available TimeField properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/time-field/).

> The `ref` is forwarded to the underlying `<TimeField />` component.

## Notes [#notes]

* For custom time fields, build on `useMuiXTimeFieldAdapter`.

## See also [#see-also]

* [useMuiXTimeFieldAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-time-field-adapter)
* [TimeField](https://mui.com/x/api/date-pickers/time-field/)


# MuiXTimePickerElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-time-picker-element)



## Import [#import]

```tsx
import { MuiXTimePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/time-picker/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/time-picker/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXTimePickerElementProps" />

`MuiXTimePickerElement` supports all standard props of the MUI X TimePicker component, along with additional adapter-specific props. For a complete list of available TimePicker properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/time-picker/).

> The `ref` is forwarded to the underlying `<TimePicker />` component.

## Notes [#notes]

* For custom time pickers, build on `useMuiXTimePickerAdapter`.

## See also [#see-also]

* [useMuiXTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-time-picker-adapter)
* [TimePicker](https://mui.com/x/api/date-pickers/time-picker/)


# MuiXYearCalendarElement (/docs/rhf-adapters/mui-x-date-pickers/components/mui-x-year-calendar-element)



## Import [#import]

```tsx
import { MuiXYearCalendarElement } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo
  tabs="[
  {
    label: &#x22;useForm&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/year-calendar/use-form.tsx&#x22;,
  },
  {
    label: &#x22;FormContainer&#x22;,
    path: &#x22;demo/adapters/mui-x-date-pickers/year-calendar/form-container.tsx&#x22;,
  },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="MuiXYearCalendarElementProps" />

`MuiXYearCalendarElement` supports all standard props of the MUI X YearCalendar component, along with additional adapter-specific props. For a complete list of available YearCalendar properties, refer to the MUI X Date Pickers [API documentation](https://mui.com/x/api/date-pickers/year-calendar/).

> The `ref` is forwarded to the underlying `<YearCalendar />` component.

## Notes [#notes]

* For custom year calendars, build on `useMuiXYearCalendarAdapter`.

## See also [#see-also]

* [useMuiXTimePickerAdapter](/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-year-calendar-adapter)
* [YearCalendar](https://mui.com/x/api/date-pickers/year-calendar/)


# useMuiXDateCalendarAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-date-calendar-adapter)



## Import [#import]

```tsx
import { useMuiXDateCalendarAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/date-calendar/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDateCalendarAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDateCalendarAdapterReturnType" />


# useMuiXDateFieldAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-date-field-adapter)



## Import [#import]

```tsx
import { useMuiXDateFieldAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/date-field/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDateFieldAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDateFieldAdapterReturnType" />


# useMuiXDatePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-date-picker-adapter)



## Import [#import]

```tsx
import { useMuiXDatePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/date-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDatePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDatePickerAdapterReturnType" />


# useMuiXDateTimePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-date-time-picker-adapter)



## Import [#import]

```tsx
import { useMuiXDateTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/date-time-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDateTimePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDateTimePickerAdapterReturnType" />


# useMuiXDesktopDatePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-desktop-date-picker-adapter)



## Import [#import]

```tsx
import { useMuiXDesktopDatePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/desktop-date-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDesktopDatePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDesktopDatePickerAdapterReturnType" />


# useMuiXDesktopDateTimePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-desktop-date-time-picker-adapter)



## Import [#import]

```tsx
import { useMuiXDesktopDateTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/desktop-date-time-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDesktopDateTimePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDesktopDateTimePickerAdapterReturnType" />


# useMuiXDesktopTimePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-desktop-time-picker-adapter)



## Import [#import]

```tsx
import { useMuiXDesktopTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/desktop-time-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDesktopTimePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDesktopTimePickerAdapterReturnType" />


# useMuiXDigitalClockAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-digital-clock-adapter)



## Import [#import]

```tsx
import { useMuiXDigitalClockAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/digital-clock/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDigitalClockAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXDigitalClockAdapterReturnType" />


# useMuiXMobileDatePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-mobile-date-picker-adapter)



## Import [#import]

```tsx
import { useMuiXMobileDatePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/mobile-date-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMobileDatePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMobileDatePickerAdapterReturnType" />


# useMuiXMobileDateTimePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-mobile-date-time-picker-adapter)



## Import [#import]

```tsx
import { useMuiXMobileDateTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/mobile-date-time-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMobileDateTimePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMobileDateTimePickerAdapterReturnType" />


# useMuiXMobileTimePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-mobile-time-picker-adapter)



## Import [#import]

```tsx
import { useMuiXMobileTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/mobile-time-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMobileTimePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMobileTimePickerAdapterReturnType" />


# useMuiXMonthCalendarAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-month-calendar-adapter)



## Import [#import]

```tsx
import { useMuiXMonthCalendarAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/month-calendar/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMonthCalendarAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMonthCalendarAdapterReturnType" />


# useMuiXMultiSectionDigitalClockAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-multi-section-digital-clock-adapter)



## Import [#import]

```tsx
import { useMuiXMultiSectionDigitalClockAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/multi-section-digital-clock/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMultiSectionDigitalClockAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXMultiSectionDigitalClockAdapterReturnType" />


# useMuiXStaticDatePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-static-date-picker-adapter)



## Import [#import]

```tsx
import { useMuiXStaticDatePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/static-date-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXStaticDatePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXStaticDatePickerAdapterReturnType" />


# useMuiXStaticDateTimePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-static-date-time-picker-adapter)



## Import [#import]

```tsx
import { useMuiXStaticDateTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/static-date-time-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXStaticDateTimePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXStaticDateTimePickerAdapterReturnType" />


# useMuiXStaticTimePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-static-time-picker-adapter)



## Import [#import]

```tsx
import { useMuiXStaticTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/static-time-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXStaticTimePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXStaticTimePickerAdapterReturnType" />


# useMuiXTimeClockAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-time-clock-adapter)



## Import [#import]

```tsx
import { useMuiXTimeClockAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/time-clock/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXTimeClockAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXTimeClockAdapterReturnType" />


# useMuiXTimeFieldAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-time-field-adapter)



## Import [#import]

```tsx
import { useMuiXTimeFieldAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/time-field/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXTimeFieldAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXTimeFieldAdapterReturnType" />


# useMuiXTimePickerAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-time-picker-adapter)



## Import [#import]

```tsx
import { useMuiXTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/time-picker/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXTimePickerAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXTimePickerAdapterReturnType" />


# useMuiXYearCalendarAdapter (/docs/rhf-adapters/mui-x-date-pickers/hooks/use-mui-x-year-calendar-adapter)



## Import [#import]

```tsx
import { useMuiXYearCalendarAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/mui-x-date-pickers/year-calendar/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXYearCalendarAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseMuiXYearCalendarAdapterReturnType" />


# NumberFormatBaseElement (/docs/rhf-adapters/react-number-format/components/number-format-base-element)



## Import [#import]

```tsx
import { NumberFormatBaseElement } from "@piplup/rhf-adapters/react-number-format";
```

## Usage [#usage]

<Demo
  tabs="[
  { label: &#x22;useForm&#x22;, path: &#x22;demo/adapters/react-number-format/number-format-base/use-form.tsx&#x22; },
  { label: &#x22;FormContainer&#x22;, path: &#x22;demo/adapters/react-number-format/number-format-base/form-container.tsx&#x22; },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="NumberFormatBaseElementProps" />

`NumberFormatBaseElement` supports all standard props of the `NumberFormatBase` component, along with additional adapter-specific props.

> The `ref` is forwarded to the underlying `<NumberFormatBase />` component.

## Notes [#notes]

* Use this component for low-level formatting scenarios when `NumericFormatElement` or `PatternFormatElement` are too specialized.
* For custom formatted inputs, build on `useNumberFormatBaseAdapter`.


# NumericFormatElement (/docs/rhf-adapters/react-number-format/components/numeric-format-element)



## Import [#import]

```tsx
import { NumericFormatElement } from "@piplup/rhf-adapters/react-number-format";
```

## Usage [#usage]

<Demo
  tabs="[
  { label: &#x22;useForm&#x22;, path: &#x22;demo/adapters/react-number-format/numeric-format/use-form.tsx&#x22; },
  { label: &#x22;FormContainer&#x22;, path: &#x22;demo/adapters/react-number-format/numeric-format/form-container.tsx&#x22; },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="NumericFormatElementProps" />

`NumericFormatElement` supports all standard props of the `NumericFormat` component, along with additional adapter-specific props.

> The `ref` is forwarded to the underlying `<NumericFormat />` component.

## Notes [#notes]

* Use this component when numeric display formatting should stay separate from stored `react-hook-form` values.
* For custom numeric format inputs, build on `useNumericFormatAdapter`.


# PatternFormatElement (/docs/rhf-adapters/react-number-format/components/pattern-format-element)



## Import [#import]

```tsx
import { PatternFormatElement } from "@piplup/rhf-adapters/react-number-format";
```

## Usage [#usage]

<Demo
  tabs="[
  { label: &#x22;useForm&#x22;, path: &#x22;demo/adapters/react-number-format/pattern-format/use-form.tsx&#x22; },
  { label: &#x22;FormContainer&#x22;, path: &#x22;demo/adapters/react-number-format/pattern-format/form-container.tsx&#x22; },
]"
/>

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="PatternFormatElementProps" />

`PatternFormatElement` supports all standard props of the `PatternFormat` component, along with additional adapter-specific props.

> The `ref` is forwarded to the underlying `<PatternFormat />` component.

## Notes [#notes]

* Use this component for masked values such as card, phone, or code patterns.
* For custom masked inputs, build on `usePatternFormatAdapter`.


# useNumberFormatBaseAdapter (/docs/rhf-adapters/react-number-format/hooks/use-number-format-base-adapter)



## Import [#import]

```tsx
import { useNumberFormatBaseAdapter } from "@piplup/rhf-adapters/react-number-format";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/react-number-format/number-format-base/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseNumberFormatBaseAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseNumberFormatBaseAdapterReturnType" />


# useNumericFormatAdapter (/docs/rhf-adapters/react-number-format/hooks/use-numeric-format-adapter)



## Import [#import]

```tsx
import { useNumericFormatAdapter } from "@piplup/rhf-adapters/react-number-format";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/react-number-format/numeric-format/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UseNumericFormatAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UseNumericFormatAdapterReturnType" />

## Notes [#notes]

* Use this hook for custom numeric formatting UIs that still need `react-hook-form` controlled state.
* It builds on `useNumberFormatBaseAdapter`.


# usePatternFormatAdapter (/docs/rhf-adapters/react-number-format/hooks/use-pattern-format-adapter)



## Import [#import]

```tsx
import { usePatternFormatAdapter } from "@piplup/rhf-adapters/react-number-format";
```

## Usage [#usage]

<Demo tabs="[{ label: &#x22;Code&#x22;, path: &#x22;https://raw.githubusercontent.com/sadik-malik/piplup-react-hook-form/refs/heads/main/packages/rhf-adapters/src/react-number-format/pattern-format/element.tsx&#x22; }]" />

## Props [#props]

<AutoTypeTable path="content/docs/props.ts" name="UsePatternFormatAdapterProps" />

## Return value [#return-value]

<AutoTypeTable path="content/docs/props.ts" name="UsePatternFormatAdapterReturnType" />

## Notes [#notes]

* Use this hook for custom masked or pattern-based inputs that still integrate with `react-hook-form`.
* It builds on `useNumberFormatBaseAdapter`.