@myntra/uikit-component-form NPM

import Form from './src/form' import { Bell } from "uikit-icons"

Form

const [name, setName] = useState();
const [gender, setGender] = useState();
const [dob, setDOB] = useState();
const [genderOptions] = useState([
  { value: 1, label: 'Female' },
  { value: 2, label: 'Male' },
  { value: 3, label: 'Other' },
]);
const handleSubmit = useCallback(() => {
  console.log({ name, gender, email, dob })
});
const handleReset = useCallback(() => {
  setName(null)
  setGender(null)
  setDOB(null)
}, [setName, setGender, setDOB]);

<Form title="Signup to UIKit" onSubmit={handleSubmit}>
  <Form.Text
    label="Name"
    value={name}
    onChange={setName}
    description="Your full name"
  />

  <Form.Select
    label="Gender"
    options={genderOptions}
    value={gender}
    onChange={setGender}
    description="Gender"
  />

  <Form.Date
    label="Date of Birth"
    value={dob}
    onChange={setDOB}
    description="Your date of birth"
  />

  <Form.Action onClick={handleReset}>Reset</Form.Action>
  <Form.Action type="primary" htmlType="submit">Signup</Form.Action>
</Form>

Available Form Fields

Examples

Form with single onChange for all fields

const [value, setValue] = useState({brand: ''})
const onSubmit = useCallback(value => console.log(value))

<>
  <Form title="Search Handover" onSubmit={onSubmit} value={value} onChange={setValue} defaultFieldSize={3}>
    <Form.Select multiple options={[{ value: 'NIKE', label: 'Nike' }, { value: 'PUMA', label: 'Puma' }]} label="Brand" value={value.brand}/>
    <Form.Text label="Article Type" />
    <Form.Radio options={[{ value: 'MEN', title: 'Men'}, { value: 'WOMEN', title: 'Women'}]} label="Gender"  />
    <Form.Text name="VAN.value" label="VAN" />

    <Button type="text">Reset All</Button>
    <Button type="primary" htmlType="submit">Search Handover</Button>
  </Form>
  <pre>{JSON.stringify(value, null, 2)}</pre>
</>

const [value, setValue] = useState(null)
const [file, setFile] = useState({})
const onSubmit = useCallback(value => console.log(value))

<>
  <Form title="Search Handover" onSubmit={onSubmit} value={value} onChange={setValue} defaultFieldSize={4}>
    <Form.Text label="Article Type" />
    <Form.Select options={[
        { value: 'male', label: 'Male' },
        { value: 'female', label: 'Female' }
      ]} 
      label="Gender"
    />
    <Form.AzureFile
      label="File"
      apiRoot="http://apidev.myntrainfo.com:18793"
      onSuccess={setFile}
      description="Choose file to upload"
    />
    <Button type="primary" htmlType="submit">Search</Button>
  </Form>
  <pre>{JSON.stringify(value, null, 2)}</pre>
</>

Different positions for action buttons

Left

const [value, setValue] = useState({brand: ''})

<>
  <Form title="Search Handover" value={value} onChange={setValue} defaultFieldSize={'half'} actions="left">
    <Form.Select multiple options={[{ value: 'NIKE', label: 'Nike' }, { value: 'PUMA', label: 'Puma' }]} label="Brand" value={value.brand}/>
    <Form.Text label="Article Type" />
    <Button type="text">Reset All</Button>
    <Button type="primary" htmlType="submit">Search Handover</Button>
  </Form>
</>

Centered

const [value, setValue] = useState({brand: ''})

<>
  <Form title="Search Handover" value={value} onChange={setValue} defaultFieldSize={'half'} actions="centered">
    <Form.Select multiple options={[{ value: 'NIKE', label: 'Nike' }, { value: 'PUMA', label: 'Puma' }]} label="Brand" value={value.brand}/>
    <Form.Text label="Article Type" />
    <Button type="text">Reset All</Button>
    <Button type="primary" htmlType="submit">Search Handover</Button>
  </Form>
</>

Right

const [value, setValue] = useState({brand: ''})

<>
  <Form title="Search Handover" value={value} onChange={setValue} defaultFieldSize={'half'} actions="right">
    <Form.Select multiple options={[{ value: 'NIKE', label: 'Nike' }, { value: 'PUMA', label: 'Puma' }]} label="Brand" value={value.brand}/>
    <Form.Text label="Article Type" />
    <Button type="text">Reset All</Button>
    <Button type="primary" htmlType="submit">Search Handover</Button>
  </Form>
</>

uikit component