Breaking News: Grepper is joining You.com. Read the official announcement!

mui form control

Exuberant Echidna answered on December 3, 2024 Popularity 1/10 Helpfulness 1/10

answer mui form control

mui form control

Comment

1	import React from 'react'
2	import { TextField, FormControl, FormHelperText } from '@mui/material'
3	import { Control, Controller } from 'react-hook-form'
4	
5	interface FormControlBoxProps {
6	  label: string
7	  name: string
8	  control: Control<any> // Update the type if needed
9	  errors: any
10	  placeholder?: string
11	  multiline?: boolean
12	  rows?: number
13	  isDisabled?: boolean
14	}
15	
16	const FormControlBox: React.FC<FormControlBoxProps> = ({
17	  label,
18	  name,
19	  control,
20	  errors,
21	  placeholder,
22	  multiline,
23	  rows,
24	  isDisabled
25	}) => {
26	  return (
27	    <FormControl fullWidth>
28	      <Controller
29	        name={name}
30	        control={control}
31	        rules={{ required: true }} // Add more validation rules as needed
32	        render={({ field: { value, onChange, onBlur } }) => (
33	          <TextField
34	            disabled={isDisabled}
35	            label={label}
36	            value={value}
37	            onBlur={onBlur}
38	            onChange={onChange}
39	            error={Boolean(errors[name])}
40	            placeholder={placeholder}
41	            multiline={multiline}
42	            rows={rows}
43	          />
44	        )}
45	      />
46	      {errors[name] && <FormHelperText sx={{ color: 'error.main' }}>{errors[name].message}</FormHelperText>}
47	    </FormControl>
48	  )
49	}
50	
51	export default FormControlBox

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: hardikdesai.vercel.app

Tags: form-control mui whatever

Link to this answer
Share Copy Link

Contributed on Dec 03 2024

Exuberant Echidna

0 Answers Avg Quality 2/10

mui form control

Contents

More Related Answers

mui form control

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.