importReactfrom"react";import{Form,Input,Select,Datepicker,Checkbox}from"@coax/form";import"@coax/form/styles/variables";// You can override default variables by importing modified variables between this two linesimport"@coax/form/styles/styles/index";functionApp(){constonSubmit=values=>{console.log(values);};return(<FormonSubmit={onSubmit}><Inputname="name"/><Selectname="gender"options={[{value: "man",label: "Man"},{value: "woman",label: "Woman"}]}/><Datepickername="dob"label="Date of birth"horizontal/><Checkboxname="terms"label="Agree Terms"/><buttontype="submit">Submit</button></Form>);}
importReactfrom"react";import{Form,Input,Checkbox}from"@coax/form";import*asyupfrom"yup";constFormSchema=yup.object().shape({name: yup.string().required(),lastName: yup.string(),terms: yup.bool().oneOf([true],'Field must be checked')});functionApp(){constonSubmit=values=>{// // do something with values//};return(<FormonSubmit={onSubmit}validationSchema={FormSchema}><Inputname="name"/><Inputname="lastName"/><Checkboxname="terms"label="Agree Terms"/><buttontype="submit">Submit</button></Form>);}
Reset form
importReactfrom"react";import{Form,Input,Checkbox,Datepicker}from"@coax/form";functionApp(){constonSubmit=(values,actions)=>{// // do something with values//actions.reset();};return(<FormonSubmit={onSubmit}><Inputname="name"/><Inputname="lastName"/><Datepickername="dob"label="Date of birth"horizontal/><Checkboxname="terms"label="Agree Terms"/><buttontype="submit">Submit</button></Form>);}
Dynamic fields
importReactfrom"react";import{Form,Input,Checkbox}from"@coax/form";functionApp(){const[showLastNameField,setShowLastNameField]=React.useState(false);constonSubmit=values=>{// // do something with values//};constonChange=values=>{setShowLastNameField(!!values.showLastName)}return(<FormonSubmit={onSubmit}onChange={onChange}listen={[]}><Inputname="name"/><Checkboxname="showLastName"label="Show full name field"/>{showLastNameField&&<Inputname="lastName"/>}<buttontype="submit">Submit</button></Form>);}
Handling Server Validation
importReact,{useState}from"react";import{Form,Input,Checkbox}from"@coax/form";functionApp(){const[serverErrors,setServerErrors]=useState({})constonSubmit=values=>{fetch("https://example.com/api/",{method: "POST",headers: {"Content-Type": "application/json"},body: JSON.stringify(values)}).then(response=>response.json()).then(response=>// do something with it).catch(err=>{// We expect your server errors to have following format:// err = {// [fieldName]: string | string[],// }setServerErrors(err)})};return(<FormonSubmit={onSubmit}serverErrors={serverErrors}><Inputname="name"/><Inputname="lastName"/><Checkboxname="terms"label="Agree Terms"/><buttontype="submit">Submit</button></Form>);}
Custom form elements (can access ref)
importReactfrom"react";import{Form,Input,useFormContext}from"@coax/form";constCustomInput=()=>{const{ register }=useFormContext()return(<divclassName="custom-holder"><inputname="phone"ref={register}/></div>)}functionApp(){constonSubmit=values=>{// // do something with values//};return(<FormonSubmit={onSubmit}><Inputname="name"/><Inputname="lastName"/><CustomInput/><buttontype="submit">Submit</button></Form>);}
importReactfrom"react";import{Form,Input,Controller}from"@coax/form";constCustomInput=()=>{return(<Controllername="phone"as={<input/>}/>)}functionApp(){constonSubmit=values=>{// // do something with values//};return(<FormonSubmit={onSubmit}><Inputname="name"/><Inputname="lastName"/><CustomInput/><buttontype="submit">Submit</button></Form>);}