### Install Dependencies

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/README.md

Install project dependencies using Yarn.

```bash
yarn
```

--------------------------------

### Install react-hook-form-mui and dependencies

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/packages/rhf-mui/README.md

Install the core package and necessary Material-UI dependencies for pickers and icons.

```bash
# npm install react-hook-form react-hook-form-mui
# yarn add react-hook-form react-hook-form-mui
```

```bash
#  npm install @mui/x-date-pickers @mui/icons-material
#  yarn add @mui/x-date-pickers @mui/icons-material
```

--------------------------------

### Run Storybook

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/README.md

Start the Storybook development server using Yarn.

```bash
yarn sb-start
```

--------------------------------

### Typesafe Form Setup with useForm

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/README.md

A more advanced form setup demonstrating typesafety using useForm, TextFieldElement, AutocompleteElement, and CheckboxElement.

```tsx
  function Form() {
    const {control, handleSubmit} = useForm({
      defaultValues: {
        name: '',
        auto: '',
        check: false
      },
    })
    const options = [
      {id: 'one', label: 'One'},
      {id: 'two', label: 'Two'},
      {id: 'three', label: 'Three'},
    ]
    return (
        <form onSubmit={handleSubmit((data) => console.log(data))} noValidate>
          <Stack spacing={2}>
            <TextFieldElement
              name={'name'}
              label={'Name'}
              control={control}
              required
              fullWidth
            />
            <AutocompleteElement
              name={'auto'}
              label={'Autocomplete'}
              control={control}
              options={options}
            />
            <CheckboxElement name={'check'} label={'Check'} control={control} />
            <Button type={'submit'} color={'primary'}>
              Submit
            </Button>
          </Stack>
        </form>
    )
  }
```

--------------------------------

### FormContainer with External FormContext

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Use this variant when you need to manage the form state externally, for example, to implement custom submit logic or reuse a form context. Pass the externally created formContext and a handleSubmit function.

```tsx
import {
  FormContainer,
  TextFieldElement,
  useForm,
} from 'react-hook-form-mui'
import {Button, Stack} from '@mui/material'

type LoginForm = {email: string; password: string}

// ── Variant B: external formContext for custom submit logic ──────────────────
function ExternalContextForm() {
  const formContext = useForm<LoginForm>({
    defaultValues: {email: '', password: ''},
  })

  const handleSubmit = formContext.handleSubmit(
    (data) => console.log('OK:', data),
    (errors) => console.error('Fail:', errors),
  )

  return (
    <FormContainer formContext={formContext} handleSubmit={handleSubmit}>
      <TextFieldElement name="email" label="Email" type="email" required />
      <Button type="submit">Submit</Button>
    </FormContainer>
  )
}
```

--------------------------------

### Build Project

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/README.md

Build the project using Yarn.

```bash
yarn build
```

--------------------------------

### Clone Repository

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/README.md

Clone your forked repository and navigate into the project directory. Optionally, add the original repository as an upstream remote.

```bash
git clone https://github.com/<your-username>/react-hook-form-mui.git
cd react-hook-form-mui
```

```bash
git remote add upstream https://github.com/dohomi/react-hook-form-mui.git
```

--------------------------------

### Storybook Options Configuration

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Sets configuration options for Storybook's documentation and tags features. 'defaultName' for Docs is specified here.

```javascript
window.DOCS_OPTIONS = {"defaultName":"Docs"};
window.TAGS_OPTIONS = {};
```

--------------------------------

### Fullscreen Storybook Layout

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

CSS to make the Storybook preview take up the entire viewport. It removes all margins and padding, allowing the story to fill the screen.

```css
.sb-show-main.sb-main-fullscreen {
  margin: 0;
  padding: 0;
  display: block;
}
```

--------------------------------

### Basic Form with TextFieldElement

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/packages/rhf-mui/README.md

Use FormContainer to set up a form and TextFieldElement for input fields. The form state is managed by react-hook-form.

```tsx
import {FormContainer, TextFieldElement} from 'react-hook-form-mui'

function Form() {
    return (
        <FormContainer
            defaultValues={{name: ''}}
            onSuccess={data => console.log(data)}
        >
            <TextFieldElement name="name" label="Name" required/>
        </FormContainer>
    )
}
```

--------------------------------

### Centered Storybook Layout

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

CSS for centering the Storybook preview in the main view. It removes margins, uses flexbox for alignment, and sets a minimum viewport height.

```css
.sb-show-main.sb-main-centered {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.sb-show-main.sb-main-centered #storybook-root {
  box-sizing: border-box;
  margin: auto;
  padding: 1rem;
  max-height: 100%;
  /* Hack for centering correctly in IE11 */
}
```

--------------------------------

### Padded Storybook Layout

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

CSS to apply padding to the Storybook preview area. This creates a consistent margin around the story content.

```css
.sb-show-main.sb-main-padded {
  margin: 0;
  padding: 1rem;
  display: block;
  box-sizing: border-box;
}
```

--------------------------------

### Storybook Global Configuration

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Sets global configuration variables for Storybook, including the environment type, log level, and framework/channel options. These settings influence Storybook's runtime behavior.

```javascript
window.CONFIG_TYPE = 'PRODUCTION';
window.LOGLEVEL = 'info';
window.FRAMEWORK_OPTIONS = {};
window.CHANNEL_OPTIONS = {};
```

--------------------------------

### TextareaAutosizeElement for Multi-line Input

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Shows how to use TextareaAutosizeElement for dynamic multi-line text input. Configurable with min/max rows and resize style, suitable for comments or descriptions.

```tsx
import {FormContainer, TextareaAutosizeElement} from 'react-hook-form-mui'
import {Button} from '@mui/material'

function CommentForm() {
  return (
    <FormContainer
      defaultValues={{comment: ''}}
      onSuccess={(data) => console.log(data)}
    >
      <TextareaAutosizeElement
        name="comment"
        label="Comment"
        required
        minRows={3}
        maxRows={8}
        resizeStyle="vertical"
        rules={{maxLength: {value: 500, message: 'Max 500 characters'}}}
        fullWidth
      />
      <Button type="submit" sx={{mt: 1}}>Post</Button>
    </FormContainer>
  )
}
```

--------------------------------

### Storybook Wrapper Styles

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Defines the main wrapper styles for the Storybook UI, including fixed positioning, padding, and font settings. It ensures the UI is consistently displayed across the viewport.

```css
.sb-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 40px;
  font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}
@media (max-width: 700px) {
  .sb-wrapper {
    padding: 20px;
  }
}
@media (max-width: 500px) {
  .sb-wrapper {
    padding: 10px;
  }
}
```

--------------------------------

### AutocompleteElement for User Assignment

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Integrate MUI Autocomplete with RHF using AutocompleteElement. Supports single and multiple selections, loading states, checkboxes, and free-form input. Use matchId to store only the option ID. Configure autocompleteProps for advanced behavior.

```tsx
import {FormContainer, AutocompleteElement} from 'react-hook-form-mui'
import {Button} from '@mui/material'

const USERS = [
  {id: 1, label: 'Alice Johnson'},
  {id: 2, label: 'Bob Smith'},
  {id: 3, label: 'Carol White'},
]

function AssignForm() {
  return (
    <FormContainer
      defaultValues={{assignee: null, reviewers: []}}
      onSuccess={(data) => console.log(data)}
    >
      {/* Single select — stores the full option object */}
      <AutocompleteElement
        name="assignee"
        label="Assignee"
        options={USERS}
        required
        textFieldProps={{helperText: 'Primary owner of this task'}}
      />

      {/* Multiple select — stores only IDs via matchId */}
      <AutocompleteElement
        name="reviewers"
        label="Reviewers"
        options={USERS}
        multiple
        matchId
        showCheckbox
        autocompleteProps={{disableCloseOnSelect: true}}
        sx={{mt: 2}}
      />

      <Button type="submit" variant="contained" sx={{mt: 2}}>Assign</Button>
    </FormContainer>
  )
}
```

--------------------------------

### Use re-exported useWatch from react-hook-form-mui

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/packages/rhf-mui/README.md

Import useWatch from 'react-hook-form-mui' instead of 'react-hook-form' to avoid potential context issues within the library.

```tsx
import {useWatch} from 'react-hook-form-mui' // instead of react-hook-form

const MySubmit = () => {
    const value = useWatch('fieldName')
    return (
        <Button disabled={!value}>Submit</Button>
    )
}
```

--------------------------------

### No Preview State Styles

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

CSS for the 'no preview' state in Storybook. It styles the container and its content to indicate that no story is currently selected or available.

```css
.sb-nopreview {
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
}
.sb-nopreview_main {
  margin: auto;
  padding: 30px;
  border-radius: 10px;
  background: rgb(247, 247, 247);
  color: rgb(46, 52, 56);
  & * {
    background: rgb(247, 247, 247);
    color: rgb(46, 52, 56);
  }
}
.sb-nopreview_heading {
  text-align: center;
}
```

--------------------------------

### Handle Vite App Loading Errors

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

This JavaScript function handles errors when loading the Storybook preview file in a Vite environment. It checks the hostname and configuration type to provide specific error messages and guidance, including recommended command-line flags or configuration options.

```javascript
function __onViteAppLoadingError(event) { const hostname = globalThis.location.hostname; if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') { const message = `Failed to load the Storybook preview file 'vite-app.js': It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this. Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal. See:`; const docs = [ 'https://storybook.js.org/docs/api/cli-options#dev', 'https://storybook.js.org/docs/api/main-config/main-config-vite-final', 'https://vite.dev/config/server-options.html#server-allowedhosts', ]; console.error(`${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`); document.getElementById('storybook-root').innerHTML = `<p style=
```

--------------------------------

### Hide Preparing Story/Docs Elements

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

CSS rules to hide elements related to story or docs preparation when the main content is not yet displayed. This ensures a clean initial view.

```css
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
  display: none;
}
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
  display: none;
}
```

--------------------------------

### RadioButtonGroup for Plan and Size Selection

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Use RadioButtonGroup to render MUI RadioGroups. Options are mapped via valueKey and labelKey. Supports horizontal layout with 'row', returning full objects with 'returnObject', numeric coercion with 'type="number"', and an empty option with 'emptyOptionLabel'.

```tsx
import {FormContainer, RadioButtonGroup} from 'react-hook-form-mui'
import {Button} from '@mui/material'

function PlanForm() {
  return (
    <FormContainer
      defaultValues={{plan: '', size: 0}}
      onSuccess={(data) => console.log(data)}
    >
      <RadioButtonGroup
        name="plan"
        label="Subscription Plan"
        options={[
          {id: 'free', label: 'Free'},
          {id: 'pro', label: 'Pro'},
          {id: 'enterprise', label: 'Enterprise'},
        ]}
        required
        row
      />

      {/* Numeric radio values */}
      <RadioButtonGroup
        name="size"
        label="Team Size"
        type="number"
        options={[
          {id: 1, label: '1–10'},
          {id: 2, label: '11–50'},
          {id: 3, label: '51+', disabled: true},
        ]}
        emptyOptionLabel="Not specified"
        sx={{mt: 2}}
      />

      <Button type="submit" variant="contained" sx={{mt: 2}}>Continue</Button>
    </FormContainer>
  )
}
```

--------------------------------

### MultiSelectElement for Skills Selection

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Use MultiSelectElement for multi-select scenarios with options. Configure showChips, showCheckbox, and preserveOrder for custom display. Ensure options use itemKey and itemLabel. Requires validation rules for minimum selections.

```tsx
import {FormContainer, MultiSelectElement} from 'react-hook-form-mui'
import {Button} from '@mui/material'

const SKILLS = [
  {id: 'ts', label: 'TypeScript'},
  {id: 'react', label: 'React'},
  {id: 'node', label: 'Node.js'},
  {id: 'python', label: 'Python'},
]

function SkillsForm() {
  return (
    <FormContainer
      defaultValues={{skills: []}}
      onSuccess={(data) => console.log('Selected skills:', data.skills)}
    >
      <MultiSelectElement
        name="skills"
        label="Skills"
        options={SKILLS}
        showChips
        showCheckbox
        preserveOrder
        required
        fullWidth
        rules={{
          validate: (v: string[]) => v.length >= 2 || 'Pick at least 2 skills',
        }}
      />
      <Button type="submit" variant="contained" sx={{mt: 2}}>Apply</Button>
    </FormContainer>
  )
}
```

--------------------------------

### SelectElement for Dropdown Selection

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Illustrates the use of SelectElement for single-select dropdowns. Supports custom options arrays, value/label key mapping, and numeric type casting for selected values.

```tsx
import {FormContainer, SelectElement} from 'react-hook-form-mui'
import {Button} from '@mui/material'

const COUNTRIES = [
  {id: 'us', label: 'United States'},
  {id: 'de', label: 'Germany'},
  {id: 'jp', label: 'Japan'},
  {id: 'br', label: 'Brazil', disabled: true},
]

function ShippingForm() {
  return (
    <FormContainer
      defaultValues={{country: '', priority: 0}}
      onSuccess={(data) => console.log(data)}
    >
      <SelectElement
        name="country"
        label="Country"
        options={COUNTRIES}
        required
        fullWidth
        sx={{mb: 2}}
      />

      {/* Numeric select */}
      <SelectElement
        name="priority"
        label="Priority"
        type="number"
        options={[
          {id: 1, label: 'Low'},
          {id: 2, label: 'Medium'},
          {id: 3, label: 'High'},
        ]}
        fullWidth
      />

      <Button type="submit" variant="contained" sx={{mt: 2}}>Confirm</Button>
    </FormContainer>
  )
}
```

--------------------------------

### Storybook Story Definition

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Defines how Storybook discovers and imports stories. It specifies the directory, file pattern, and import path matcher for story files.

```javascript
window.STORIES = [{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.["\\/\\](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];
```

--------------------------------

### Storybook Heading Styles

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Styles for headings within the Storybook UI, defining font size, weight, letter spacing, and margins. Used for section titles and labels.

```css
.sb-heading {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 10px 0;
  padding-right: 25px;
}
```

--------------------------------

### Define Nunito Sans Font Faces

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Defines multiple font face rules for 'Nunito Sans' with different weights and styles. Ensures the font is available for use within Storybook.

```css
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
```

--------------------------------

### Disable Hot Module Replacement

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Sets window.module to undefined to prevent potential errors in Storybook's source code related to hot module replacement when it's not available.

```javascript
window.module = undefined;
window.global = window;
```

--------------------------------

### TextFieldElement Usage with React Hook Form

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Demonstrates various configurations of TextFieldElement for different input types like text, number, and email. Includes required validation, min/max length rules, and custom error parsing.

```tsx
import {FormContainer, TextFieldElement} from 'react-hook-form-mui'
import {Button, Stack} from '@mui/material'

type ProfileForm = {
  username: string
  age: number | null
  email: string
  bio: string
}

function ProfileForm() {
  return (
    <FormContainer<ProfileForm>
      defaultValues={{username: '', age: null, email: '', bio: ''}}
      onSuccess={(data) => console.log(data)}
    >
      <Stack spacing={2}>
        {/* Simple required text field */}
        <TextFieldElement
          name="username"
          label="Username"
          required
          rules={{minLength: {value: 3, message: 'Min 3 characters'}}}
        />

        {/* Numeric field: stores a number (or null) instead of string */}
        <TextFieldElement
          name="age"
          label="Age"
          type="number"
          rules={{min: {value: 18, message: 'Must be 18+'}}}
        />

        {/* Email with auto regex validation */}
        <TextFieldElement name="email" label="Email" type="email" required />

        {/* Custom error renderer */}
        <TextFieldElement
          name="bio"
          label="Bio"
          parseError={(err) => `⚠ ${err.message}`}
          rules={{maxLength: {value: 200, message: 'Max 200 chars'}}}
        />

        <Button type="submit" variant="contained">Save</Button>
      </Stack>
    </FormContainer>
  )
}
```

--------------------------------

### Error Display Styles

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Styles for displaying errors within Storybook. This includes background, color, z-index, and box-sizing for the error container, ensuring errors are prominent.

```css
.sb-errordisplay {
  background: #f6f9fc;
  color: black;
  z-index: 999999;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
}
.sb-errordisplay_main {
  margin: auto;
  padding: 24px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  border-radius: 6px;
  background: white;
  color: black;
  border: 1px solid #ff0000;
  box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
  gap: 24px;
  & ol {
    padding-left: 18px;
    margin: 0;
  }
  /* Redefine colors to ensure readability regardless of user-provided * selectors. */
  * {
    background: white;
    color: black;
  }
  & h1 {
    font-family: Nunito Sans;
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    font-weight: normal;
    margin: 0;
    &::before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #ff4400;
      border-radius: 50%;
      margin-right: 8px;
    }
  }
  & p, & ol {
    font-family: Nunito Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    margin: 0;
  }
  & li + li {
    margin: 0;
    padding: 0;
    padding-top: 12px;
  }
  & a {
    color: currentColor;
  }
  & .sb-errordisplay_code {
    padding: 10px;
    flex: 1;
    background: #242424;
    color: #c6c6c6;
    box-siz
  }
}
```

--------------------------------

### SwitchElement for Boolean Toggles

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Employ SwitchElement for boolean toggles, integrating with MUI's Switch component. It allows forwarding props to the Switch and supports custom value mapping.

```tsx
import {FormContainer, SwitchElement} from 'react-hook-form-mui'
import {Button, Stack} from '@mui/material'

function SettingsForm() {
  return (
    <FormContainer
      defaultValues={{darkMode: false, notifications: true}}
      onSuccess={(data) => console.log(data)}
    >
      <Stack>
        <SwitchElement
          name="darkMode"
          label="Dark Mode"
          switchProps={{color: 'primary'}}
        />
        <SwitchElement
          name="notifications"
          label="Enable Notifications"
        />
        <Button type="submit" variant="outlined" sx={{mt: 1, alignSelf: 'start'}}>
          Save Settings
        </Button>
      </Stack>
    </FormContainer>
  )
}
```

--------------------------------

### Storybook Feature Flags

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

Configures various feature flags for Storybook, enabling or disabling specific functionalities. This allows for customization of the Storybook interface and behavior.

```javascript
window.FEATURES = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true,"viewport":true,"highlight":true,"controls":true,"interactions":true,"actions":true,"backgrounds":true,"outline":true,"measure":true,"sidebarOnboardingChecklist":true,"componentsManifest":false};
```

--------------------------------

### PasswordRepeatElement for Password Confirmation

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Use PasswordRepeatElement to ensure a user's password and confirmation password fields match. Specify the original password field name using `passwordFieldName` and optionally customize the mismatch error message.

```tsx
import {
  FormContainer,
  PasswordElement,
  PasswordRepeatElement,
} from 'react-hook-form-mui'
import {Button, Stack} from '@mui/material'

type RegisterForm = {password: string; confirmPassword: string}

function RegisterForm() {
  return (
    <FormContainer<RegisterForm>
      defaultValues={{password: '', confirmPassword: ''}}
      onSuccess={(data) => console.log('Registered:', data)}
    >
      <Stack spacing={2}>
        <PasswordElement name="password" label="Password" required fullWidth />
        <PasswordRepeatElement
          name="confirmPassword"
          label="Confirm Password"
          passwordFieldName="password"
          customInvalidFieldMessage="Passwords do not match"
          required
          fullWidth
        />
        <Button type="submit" variant="contained">Register</Button>
      </Stack>
    </FormContainer>
  )
}
```

--------------------------------

### Self-Managed Form with FormContainer

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Use this variant when FormContainer should internally manage the form state using useForm. It's suitable for most common form scenarios.

```tsx
import {
  FormContainer,
  TextFieldElement,
  useForm,
} from 'react-hook-form-mui'
import {Button, Stack} from '@mui/material'

type LoginForm = {email: string; password: string}

// ── Variant A: self-managed form (most common) ──────────────────────────────
function LoginForm() {
  return (
    <FormContainer<LoginForm>
      defaultValues={{email: '', password: ''}}
      onSuccess={(data) => {
        // data is fully typed as LoginForm
        console.log('Submitted:', data)
      }}
      onError={(errors) => {
        console.warn('Validation errors:', errors)
      }}
      FormProps={{noValidate: true, style: {width: 400}}}
    >
      <Stack spacing={2}>
        <TextFieldElement name="email" label="Email" type="email" required />
        <TextFieldElement name="password" label="Password" type="password" required />
        <Button type="submit" variant="contained">Login</Button>
      </Stack>
    </FormContainer>
  )
}
```

--------------------------------

### PasswordElement with Show/Hide Toggle

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Use PasswordElement for password input fields, which includes a built-in show/hide toggle. It extends TextFieldElement and allows customization of the visibility icons.

```tsx
import {FormContainer, PasswordElement} from 'react-hook-form-mui'
import {Button} from '@mui/material'
import LockOpenIcon from '@mui/icons-material/LockOpen'
import LockIcon from '@mui/icons-material/Lock'

function ChangePasswordForm() {
  return (
    <FormContainer
      defaultValues={{password: ''}}
      onSuccess={(data) => console.log(data)}
    >
      <PasswordElement
        name="password"
        label="New Password"
        required
        fullWidth
        iconColor="primary"
        renderIcon={(visible) => (
          visible ? <LockOpenIcon /> : <LockIcon />
        )}
        rules={{
          minLength: {value: 8, message: 'Password must be at least 8 characters'},
          pattern: {
            value: /[A-Z]/,
            message: 'Must contain at least one uppercase letter',
          },
        }}
      />
      <Button type="submit" variant="contained" sx={{mt: 2}}>Update</Button>
    </FormContainer>
  )
}
```

--------------------------------

### DatePickerElement with Date Validation

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Integrate MUI X DatePicker with React Hook Form using DatePickerElement. Configure date validation rules like `disablePast` or `minDate` and customize error messages with `overwriteErrorMessages`. The `textReadOnly` prop disables keyboard input.

```tsx
import {
  FormContainer,
  DatePickerElement
} from 'react-hook-form-mui'
import {LocalizationProvider} from '@mui/x-date-pickers'
import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns'
import {Button, Stack} from '@mui/material'
import {addDays, startOfToday} from 'date-fns'

function EventForm() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <FormContainer
        defaultValues={{startDate: null, endDate: null}}
        onSuccess={(data) => console.log(data)}
      >
        <Stack spacing={2}>
          <DatePickerElement
            name="startDate"
            label="Start Date"
            required
            disablePast
            overwriteErrorMessages={{
              disablePast: 'Start date cannot be in the past',
            }}
          />
          <DatePickerElement
            name="endDate"
            label="End Date"
            required
            minDate={addDays(startOfToday(), 1)}
            textReadOnly
            inputProps={{helperText: 'Keyboard input disabled'}}
          />
          <Button type="submit" variant="contained">Create Event</Button>
        </Stack>
      </FormContainer>
    </LocalizationProvider>
  )
}
```

--------------------------------

### Hide Specific Storybook UI Blocks

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

CSS rules to hide Storybook UI blocks like 'preparing-story', 'nopreview', or 'errordisplay' when their corresponding show classes are not active. This manages the visibility of different UI states.

```css
:not(.sb-show-preparing-story) > .sb-preparing-story,
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
:not(.sb-show-nopreview) > .sb-nopreview,
:not(.sb-show-errordisplay) > .sb-errordisplay {
  display: none;
}
```

--------------------------------

### IE11 Vertical Centering Fix

Source: https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/storybook-static/iframe.html

A media query specific fix for Internet Explorer 11 to ensure vertical centering works correctly with the centered layout.

```css
/* Vertical centering fix for IE11 */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .sb-show-main.sb-main-centered:after {
    content: '';
    min-height: inherit;
    font-size: 0;
  }
}
```

--------------------------------

### Global Error Provider for RHF Components

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

A React context provider that defines a single, application-wide error message renderer. Wrap the application (or a section of it) in FormErrorProvider to override the default error.message display on all react-hook-form-mui components without setting parseError on each one individually. Use useFormError to read the error function in custom components.

```tsx
import {
  FormContainer,
  FormErrorProvider,
  TextFieldElement,
  useFormError,
} from 'react-hook-form-mui'
import {Alert, Button, Stack} from '@mui/material'
import type {FieldError} from 'react-hook-form'

// Global error renderer: renders a coloured Alert instead of plain text
function globalErrorRenderer(error: FieldError) {
  return (
    <Alert severity="error" sx={{py: 0, px: 1, fontSize: 12}}>
      {error.message}
    </Alert>
  )
}

// Custom field that reads the global renderer
function StatusField() {
  const onError = useFormError()
  // onError is now globalErrorRenderer; use it in custom logic if needed
  return <TextFieldElement name="status" label="Status" required />
}

function App() {
  return (
    <FormErrorProvider onError={globalErrorRenderer}>
      <FormContainer
        defaultValues={{username: '', status: ''}}
        onSuccess={(data) => console.log(data)}
      >
        <Stack spacing={2}>
          <TextFieldElement name="username" label="Username" required />
          <StatusField />
          <Button type="submit" variant="contained">Submit</Button>
        </Stack>
      </FormContainer>
    </FormErrorProvider>
  )
}
```

--------------------------------

### Use Transform Hook for Value Transformation

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

A low-level hook that decouples how a value is stored in the form from how it is displayed. Accepts 'input' (form state → display value) and 'output' (UI event → form state) transform functions. Used internally by every component's 'transform' prop; can also be used directly in custom controlled inputs.

```tsx
import {
  FormContainer,
  TextFieldElement,
  useTransform,
  useController,
} from 'react-hook-form-mui'
import {TextField} from '@mui/material'

// Example: store a comma-separated string in form state,
// but display it as an array of tags joined by " | "
function TagsInput({name, control}: {name: string; control?: any}) {
  const {field} = useController({name, control})

  const {value, onChange} = useTransform({
    value: field.value as string,
    onChange: field.onChange,
    transform: {
      // form stores "react,typescript,mui" → display "react | typescript | mui"
      input: (v: string) => (v ? v.split(',').join(' | ') : ''),
      // display "react | typescript | mui" → store "react,typescript,mui"
      output: (e: React.ChangeEvent<HTMLInputElement>) =>
        e.target.value.split(' | ').join(','),
    },
  })

  return (
    <TextField
      name={field.name}
      value={value}
      onChange={onChange}
      onBlur={field.onBlur}
      label="Tags (pipe-separated)"
      fullWidth
    />
  )
}

// Using the built-in transform prop on TextFieldElement for cents ↔ dollars
function PriceForm() {
  return (
    <FormContainer
      defaultValues={{priceInCents: 0}}
      onSuccess={(data) => console.log('Price in cents:', data.priceInCents)}
    >
      <TextFieldElement
        name="priceInCents"
        label="Price (USD)"
        type="number"
        transform={{
          input: (cents: number) => cents / 100,
          output: (e) => Math.round(Number(e.target.value) * 100),
        }}
      />
    </FormContainer>
  )
}
```

--------------------------------

### SliderElement for Range and Single Value Selection

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Use SliderElement to bind MUI Slider components to form fields. Supports range selection (array values) and single value selection, with options for min, max, step, marks, and custom value transformation. Validation rules can be applied directly.

```tsx
import {
  FormContainer,
  SliderElement
} from 'react-hook-form-mui'
import {Button} from '@mui/material'

function FilterForm() {
  return (
    <FormContainer
      defaultValues={{priceRange: [0, 500], quality: 3}}
      onSuccess={(data) => console.log(data)}
    >
      {/* Range slider (stores number[]) */}
      <SliderElement
        name="priceRange"
        label="Price Range ($)"
        min={0}
        max={1000}
        step={10}
        marks={[
          {value: 0, label: '$0'},
          {value: 500, label: '$500'},
          {value: 1000, label: '$1000'},
        ]}
        valueLabelDisplay="auto"
        sx={{mb: 4}}
      />

      {/* Single value slider */}
      <SliderElement
        name="quality"
        label="Minimum Quality"
        min={1}
        max={5}
        step={1}
        marks
        required
        rules={{min: {value: 2, message: 'Quality must be at least 2'}}}
      />

      <Button type="submit" variant="contained" sx={{mt: 2}}>Apply Filters</Button>
    </FormContainer>
  )
}
```

--------------------------------

### Toggle Button Group Element with RHF

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Integrates MUI ToggleButtonGroup with React Hook Form. Options are provided as {id, label} objects. Use 'exclusive' for single-selection and 'enforceAtLeastOneSelected' to prevent deselecting the last active button.

```tsx
import {FormContainer, ToggleButtonGroupElement} from 'react-hook-form-mui'
import {Button} from '@mui/material'

function EditorForm() {
  return (
    <FormContainer
      defaultValues={{alignment: 'left', tags: []}}
      onSuccess={(data) => console.log(data)}
    >
      {/* Single-select: stores a string */}
      <ToggleButtonGroupElement
        name="alignment"
        label="Text Alignment"
        exclusive
        enforceAtLeastOneSelected
        options={[
          {id: 'left', label: 'Left'},
          {id: 'center', label: 'Center'},
          {id: 'right', label: 'Right'},
        ]}
        sx={{mb: 2}}
      />

      {/* Multi-select: stores string[] */}
      <ToggleButtonGroupElement
        name="tags"
        label="Article Tags"
        options={[
          {id: 'news', label: 'News'},
          {id: 'tutorial', label: 'Tutorial'},
          {id: 'opinion', label: 'Opinion'},
        ]}
        required
        rules={{validate: (v: string[]) => v.length > 0 || 'Pick a tag'}}
      />

      <Button type="submit" variant="contained" sx={{mt: 2}}>Publish</Button>
    </FormContainer>
  )
}
```

--------------------------------

### CheckboxElement for Boolean Fields

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Utilize CheckboxElement for single boolean fields, providing label and error display. It supports custom transformations and error message parsing.

```tsx
import {FormContainer, CheckboxElement} from 'react-hook-form-mui'
import {Button} from '@mui/material'

function TermsForm() {
  return (
    <FormContainer
      defaultValues={{terms: false, marketing: false}}
      onSuccess={(data) => console.log(data)}
    >
      <CheckboxElement
        name="terms"
        label="I agree to the Terms and Conditions"
        required
        rules={{
          validate: (v: boolean) => v || 'You must accept the terms',
        }}
      />
      <CheckboxElement
        name="marketing"
        label="Send me marketing emails"
        helperText="You can unsubscribe at any time."
      />
      <Button type="submit" variant="contained" sx={{mt: 2, display: 'block'}}>
        Register
      </Button>
    </FormContainer>
  )
}
```

--------------------------------

### CheckboxButtonGroup for Multi-Select

Source: https://context7.com/dohomi/react-hook-form-mui/llms.txt

Use CheckboxButtonGroup for multi-value selection where selected items are stored as an array. It supports horizontal layout and custom checkbox colors.

```tsx
import {FormContainer, CheckboxButtonGroup} from 'react-hook-form-mui'
import {Button} from '@mui/material'

function NotificationForm() {
  return (
    <FormContainer
      defaultValues={{channels: []}}
      onSuccess={(data) => console.log('Channels:', data.channels)}
    >
      <CheckboxButtonGroup
        name="channels"
        label="Notification Channels"
        options={[
          {id: 'email', label: 'Email'},
          {id: 'sms', label: 'SMS'},
          {id: 'push', label: 'Push Notification'},
          {id: 'slack', label: 'Slack', disabled: true},
        ]}
        required
        row
        checkboxColor="secondary"
        rules={{
          validate: (v: string[]) =>
            v.length > 0 || 'Select at least one channel',
        }}
      />
      <Button type="submit" variant="contained" sx={{mt: 2}}>Save</Button>
    </FormContainer>
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.