Function Form

Example

import Form, {text, number, select, autocomplete, date} from 'muitils/Form';

<Form 
 inputs={{
  firstName: text('First Name'),
  lastName: text('Last Name'),
  gender: select('Gender', {
    options:['Male', 'Female', 'Other']
     .map(v=>({value:v, label:v}))
  }),
  age: number('Age', {input:{min: 18}, validate:v=>v>=18}),
  petFish: autocomplete('Pet Fish', {
    options:['Goldfish', 'Tropical Fish', 'Catfish']
    .map(v=>({value:v, label:v}))
  }),
  birthday: date('Birthday', {
    minDate: new Date(1900, 0, 1).toISOString(),
    maxDate: new Date(2024, 11, 20).toISOString()
  }),
}} 
onSubmit={(v)=>{
  console.log(v.firstName); // string
  console.log(v.lastName); // string
  console.log(v.gender); // 'Male' | 'Female' | 'Other'
  console.log(v.age); // number
  console.log(v.petFish); // string | {id:string, label:string}
  console.log(v.birthday); // string (iso date string)
}}/>
Copy

Custom Inputs

Custom inputs are useful when you need to create a custom input that is not supported by the library.

Example

export function CustomInputForm(){
   const [isValidate, setIsValidate] = useState(false);
   return (
     <Form
       inputs={{
         email: custom({
           value: '',
           validate: (v:string) => v.includes('@')
         }, ({value, setValue, isValid}) => (
           <div>
             <label>Email</label>
             <input 
               type="text" 
               value={value} 
               onChange={e => setValue(e.target.value)} 
               onBlur={() => setIsValidate(true)}
             />
             {!isValid && <span>Invalid email</span>}
           </div>
         ))
       }}
       onSubmit={v => alert(JSON.stringify(v, null, 2))}
       isValidate={isValidate}
     />
   )
 }
Copy

Controlled Inputs

Controlled inputs are useful when you need to control the value of an input from outside of the form.

Example

export function ControlledForm(){
   const [password, setPassword] = useState('');
   const [isValidate, setIsValidate] = useState(false);
   return (
     <Form
       inputs={{
         email: text('Email'),
         password: text('Password', { 
           value: password,
           setValue: v => setPassword(v),
           input: { type: 'password' }, 
         }),
         confirmPassword: text('Confirm Password', { 
           validate: v => v === password,
           errorText: 'Passwords do not match',
           onBlur: () => setIsValidate(true),
           input: { type: 'password' },
         }),
       }}
       onSubmit={v => alert(JSON.stringify(v, null, 2))}
       // onChange={({password}) => setPassword(password)}
       isValidate={isValidate}
     />
   )
 }
Copy