Search
showing results for - "react hook form rating material ui"
Matthew
11 Nov 2017
1import React from "react";
2import { useForm, Controller } from "react-hook-form";
3import Select from "react-select";
4import Input from "@material-ui/core/Input";
5import { Input as InputField } from "antd";
6
7export default function App() {
8  const { control, handleSubmit } = useForm();
9  const onSubmit = data => console.log(data);
10
11  return (
12    <form onSubmit={handleSubmit(onSubmit)}>
13      <Controller as={Input} name="HelloWorld" control={control} defaultValue="" />
14      <Controller as={InputField} name="AntdInput" control={control} defaultValue="" />
15      <Controller
16        as={Select}
17        name="reactSelect"
18        control={control}
19        onChange={([selected]) => {
20          // React Select return object instead of value for selection
21          return { value: selected };
22        }}
23        defaultValue={{}}
24      />
25
26      <input type="submit" />
27    </form>
28  );
29}
30
Louisa
20 Jan 2020
1import React, { useState } from "react";
2import Checkbox from "@material-ui/core/Checkbox";
3import Button from "@material-ui/core/Button";
4import TextField from "@material-ui/core/TextField";
5import FormControlLabel from "@material-ui/core/FormControlLabel";
6import Typography from "@material-ui/core/Typography";
7import { makeStyles } from "@material-ui/core/styles";
8import Container from "@material-ui/core/Container";
9import { useForm } from "react-hook-form";
10import Rating from "@material-ui/lab/Rating";
11import StarBorderIcon from '@material-ui/icons/StarBorder';
12
13const useStyles = makeStyles((theme) => ({
14  paper: {
15    marginTop: theme.spacing(8),
16    display: "flex",
17    flexDirection: "column",
18    alignItems: "center"
19  },
20  form: {
21    width: "100%", // Fix IE 11 issue.
22    marginTop: theme.spacing(1)
23  },
24  submit: {
25    margin: theme.spacing(3, 0, 2)
26  }
27}));
28
29export default function Create() {
30  const classes = useStyles();
31  const [rating, setRating] = useState(2);
32  const { register, handleSubmit } = useForm();
33  const onSubmit = (data) => {
34    console.log(data);
35  };
36
37  return (
38    <Container component="main" maxWidth="xs">
39      <div className={classes.paper}>
40        <Typography component="h1" variant="h5">
41          Form
42        </Typography>
43        <form
44          className={classes.form}
45          noValidate
46          onSubmit={handleSubmit(onSubmit)}
47        >
48          <TextField
49            variant="outlined"
50            margin="normal"
51            fullWidth
52            id="title"
53            label="Title"
54            name="title"
55            autoFocus
56            inputRef={register()}
57          />
58          <FormControlLabel
59            control={
60              <Checkbox
61                inputRef={register}
62                name="remember"
63                defaultValue={false}
64              />
65            }
66            label="remember"
67          />
68          <br />
69          <FormControlLabel
70            control={
71              <>
72                <input
73                  name="rating"
74                  type="number"
75                  value={rating}
76                  ref={register}
77                  hidden
78                  readOnly
79                />
80                <Rating
81                  name="rating"
82                  value={rating}
83                  precision={0.5}
84                  onChange={(_, value) => {
85                    setRating(value);
86                  }}
87                  icon={<StarBorderIcon fontSize="inherit" />}
88                />
89              </>
90            }
91            label="select rating"
92          />
93          <Button
94            type="submit"
95            fullWidth
96            variant="contained"
97            color="primary"
98            className={classes.submit}
99          >
100            Submit
101          </Button>
102        </form>
103      </div>
104    </Container>
105  );
106}
107
similar questions
field array using useformikuseformikreact hook form input npmhow to use error in react hook formreact hook form inputreact hook form clear formreact hook form example stack overflowhow to turn of autocomplete in react hook form material uireact hook form typescriptinput hook reactreact hooks formreact js form radio input using hookssimple form based react material uireact form hook npmreact hook input formreact hook form submit outside formreact select with react hook form cotrollerreact hook form password validation uppercaseautocomplete an address with a react hook formreact hook form image
queries leading to this page
react hook form react select examplemodify input data react hook formformdata react hook forminnerref react form hookscontroller material ui react hook formmaterial ui form validation react functional component hooksreact hook form with react material uiuse react hook form with material uireact hook form material ui valueasnumberreact material ui formreact hook form select valuepost react select through react hook formselect box in react hook formhow to create a reusable select field using react hook form 2c react forward ref and material uireact hook form validationrulereact hook form controllerreact hook form material ui exampleexample useform hookmaterial ui react hook form labelreact hook form with material ui textfieldreact hooks form examplecan i use react hook form in react nativewrapper for react select in react hook formreact hook form with material uicontroller react hook form material uioption form in react hooksmaterial ui form hooksreact hook form with material ui exampleconst mycompoent react 3afc example to submit the hook form datareact hook form material ui text fieldreact hooks form material ui helper textreact hook form material uihow to handle forms with react material ui hooksreact hook form typesreact hook form controlled inputreact hook form select validationreact hook forms selectreact form validation hooksuseform hookreact hook form validatorselect option in react forms hook5 star rating react typescript material ui react hook formreact hook formconst mycompoent react 3afc example to submit the hook form data into djangoreact hook form match material uireact hook form material ui joi validationreact hook form select material ui example react hook form with react select react hooks inputmaterial ui controller react hook formmaterial ui and react hook form exampleselect with react hooks formmaterial ui inputref useeffect register use form hookselect import from useformreact hook form integrate with react selecttextfield material ui react hook formmaterial ui pickers with controller react hook formusing metarial ui react hook registartion form examplereact hook form select material ui validationreact hook form with select optionuse form reactmaterial ui select react hook form tutorialform reactreact formsform in reactreact hooks form with selectreact hook form material ui set valuereact hook selectreact hook form register pagereact hook form native selectreact hook form with material uireact material ui basic formmaterial ui hook useformreact material ui form examplereact hooks form validator material uireact select with react hook formreact hook form interger validationreact hook form material uiform hooksreact hook form material ui label cover the valuereact form hooksreact hook forms material uimaterial ui reach hook form 7inputref react hook form meaningreact hook form watchreact hook form selectreact hook form material uimaterial ui react hook formreact hook form with material ui textfield email validationhow to implement select with object in react hook formreact hook form api connect with reduxselect boxes using react hook formreact hook form ts examplereact calendar ref react hook formreact select react hook formreact hook form material ui textfieldupdate react hook form with material uireact hook form ref in material uireact hook form material uireact hooks form validation examplereact hook form rating material uirequired min charters react formvalidation with hooks in reactmaterial ui react hook form textfieldform built using react hook formintegrating with global state react hook fromsreact hook form 7 material uimaterial ui react hook form version 7react hook form textfield select muireact hook form mui 5react native form hooks with schema examplereact formreact creatable select hook formhow to use react hook formreact hook form validation with controlreact hooks form material uicontrol react hook form controluseform reactreact hook form antd input textareamaterial ui react hook formreact hook form material ui text inputcreate react checkbox form with hooksmui picker is missing in the 27default value 27 prop of either its controller 28https 3a 2f 2freact hook form com 2fapi 23controller 29 or useform 28https 3a 2f 2freact hook form com 2fapi 23useform 29react hook form without material uireact hook form smart form material uimaterial ui ref react hook formreact hook form tutorialmaterial ui react hooks formreact hook forms and questions typesreact hook form react selecttform useform hook validation material ui textfield selectreact hook form select registermui textfield react hook formreact hook form number format material uireact hook form material ui classnamereact hook form react nativereact hook form typescript routerreact hook form do you have to install itreact hook form sandboxcreatestore react hook form examplewatch on material ui component react hook formsimple form in reactcreate reuable select field component using react hook form and react forwarf ref with errors and validation with material uireacct hook form controllerexport react formmaterial ui form component validation using react js hooks formget value of textarea react hooksreact hook form controller materialadd icons to react hook forminput creator react hook fotmmaterial ui pickers setup in react hook formreact hook formsmaterialui form with react hookmaterial ui and react hook form 7how to console log react hook form react hook form select required registerreact hook form selectreact hook form register optionsreact form hook material uireact hook form material ui radiomaterial ui react hook form input number material ui textfield react hook formreact hook form number fieldreact hook form how to register a selectmaerial ui react hook formhow to use react hook form with material uireact hook form material ui validate react hook form on clickreact hook form loginreact hook form dropdownyup schema select react hook formreact useformreact use formreact hook form validation material uireack hook form validate 2 formmaterial ui react hook form inputreact hook form examplereact hook form validation typesreact hooks material ui formreact select react hook formreact hook form react native examplematerial ui with react hook formuseform react examplerequired hook formreact hook form antd input textareadreact hooks form selectreact hook form material ui version 7react hooks forminstall yup jsimport create useform 2areact select with react hook formreact hook forms conversational questionaireselect register min 1 react hooks formreact hook form 2c controller 2c material ui examplesmaterial ui picker react hook formreact hook form sandbox 5dcontroller in react hook formreact hook form material ui yupreact hook form textfieldcontroller mapping react hook formmaterial ui and react hook formrequire for react hook form in react nativeuseform hook tutorialform useform hooks validation material ui textfield select 22react select 22 hook formmaterial ui form tutprial ract hooksreact hook form controller propsreact functional forms projectreact hook form controller validationreact hook form options 3d 7boptions 7dusing react hook form and material uireact hook form and material ui exampleselect react hook formexample of material ui textfield validationusing react hook form with material uireact hook form material ui validationreact hook form custom rulesreact hook form rating material ui