styling

test/index.html

@@ -11,11 +11,6 @@
 		body {
 			padding: 1em
 		}
-
-		input,
-		select {
-			display: block;
-		}
 	</style>
 </head>
 

test/test.tsx

@@ -33,35 +33,39 @@ const Index: React.FC = () => {
     <div>
       <form onSubmit={_submit}>
         <div>Username</div>
-        <input {...auto('username')} />
-        {errors.username && 'Something went wrong'}
+        <input className="input" {...auto('username')} />
         <TextError error={errors.username} />
-        <br />
+        <br /><br />
 
         <div>Password</div>
-        <input {...auto('password')} />
+        <input className="input" {...auto('password')} />
         <TextError error={errors.password} />
-        <br />
+        <br /><br />
 
         <div>Which one to choose?</div>
+        <div className="select">
           <select {...auto('type')}>
             <option value="redux-form">Redux-Form</option>
             <option value="react-hook-forms">React-Hook-Forms</option>
             <option value="formik">Formik</option>
             <option value="formhero">FormHero</option>
           </select>
-        <br />
+        </div>
+        <br /><br />
 
-        <div>Is it awesome?</div>
-        <input type="checkbox" name="vehicle" {...auto('awesome', {
+
+        <label className="checkbox">
+          <input type="checkbox" {...auto('awesome', {
             setter: 'checked',
             getter: 'onChange',
             extractor: (e) => e.target.checked
           })} />
+          Is it awesome?
+        </label>
         <TextError error={errors.awesome} />
-        <br />
+        <br /><br />
 
-        <button type="submit">Go 🚀</button>
+        <button className="button" type="submit">Go 🚀</button>
       </form>
     </div>
   )