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[]
  console.log(v.birthday); // string (iso date string)
}}/>
Copy