📄 tanstack/form/v1/docs/framework/react/examples/ui-libraries

======================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

src
- MainComponent.tsx
- index.tsx
.eslintrc.cjs
.gitignore
README.md
index.html
package.json
postcss.config.cjs
tsconfig.json
vite.config.ts

tsx

import React from 'react'

import { TanStackDevtools } from '@tanstack/react-devtools'
import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'

import { createRoot } from 'react-dom/client'
import { createTheme } from '@mui/material/styles'
import { red } from '@mui/material/colors'
import { ThemeProvider } from '@emotion/react'
import { CssBaseline } from '@mui/material'
import MainComponent from './MainComponent'

const theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
  },
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <MainComponent />
    </ThemeProvider>
  )
}

const rootElement = document.getElementById('root')!

createRoot(rootElement).render(
  <React.StrictMode>
    <App />

    <TanStackDevtools
      config={{ hideUntilHover: true }}
      plugins={[formDevtoolsPlugin()]}
    />
  </React.StrictMode>,
)


import React from 'react'

import { TanStackDevtools } from '@tanstack/react-devtools'
import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'

import { createRoot } from 'react-dom/client'
import { createTheme } from '@mui/material/styles'
import { red } from '@mui/material/colors'
import { ThemeProvider } from '@emotion/react'
import { CssBaseline } from '@mui/material'
import MainComponent from './MainComponent'

const theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
  },
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <MainComponent />
    </ThemeProvider>
  )
}

const rootElement = document.getElementById('root')!

createRoot(rootElement).render(
  <React.StrictMode>
    <App />

    <TanStackDevtools
      config={{ hideUntilHover: true }}
      plugins={[formDevtoolsPlugin()]}
    />
  </React.StrictMode>,
)

Remix

Field Errors From Form Validators

Partners Become a Partner

scarf analytics