# Form

To make use of the form, you must import it first:
`import { Form } from 'towelify';`

Then you set up the Form as follows:
```
<Form
  heading={{ title: 'A New Form', type: 'h3' }}
  onSubmit=""
  initialValues={{
    name: 'name',
    email: 'email@email.com',
    password: 'password',
    checkbox: false,
    select: 'first',
    textarea: '',
    optionExample: 'option1',
    file: '',
  }}
>
```
Here the heading is required with an object in brackets that has a title and type, otherwise the form won't work. Next put in an onSubmit value in brackets. If you want initial values for your form elements, put them in like above.

Next, group your form labels and inputs with form groups and putting props on that form group to identify what form element you're using as follows:
```
<Form.Group property="name" type="text">
  <Form.Label>Name</Form.Label>
  <Form.TextInput />
</Form.Group>
```
The property can be: name, email, password, checkbox, select, textarea, optionExample, or file. If the form element is a <Form.TextInput>, also include the type (i.e. text, email, password...).

And don't forget to put a submit button at the bottom of your form!
`<Form.SubmitButton>Submit</Form.SubmitButton>`

Other examples of form groups are as follows:
```
<Form.Group property="password" type="password">
  <Form.Label>Password</Form.Label>
  <Form.TextInput />
</Form.Group>
```
```
<Form.Group property="checkbox" inline>
  <Form.Checkbox />
  <Form.Label>Check me out</Form.Label>
</Form.Group>
```
```
<Form.Group property="select">
  <Form.Label>Select something</Form.Label>
  <Form.Select options={['first', 'second', 'third']} />
</Form.Group>
```
```
<Form.Group property="textarea">
  <Form.Label>Write something</Form.Label>
  <Form.TextArea />
</Form.Group>
```
```
<Form.Group property="optionExample" id={1} inline>
  <Form.Label>Option 1</Form.Label>
  <Form.RadioButton id="option1" />
  <Form.Label>Option 2</Form.Label>
  <Form.RadioButton id="option2" />
  <Form.Label>Option 3</Form.Label>
  <Form.RadioButton id="option3" />
</Form.Group>
```
```
<Form.Group property="file">
  <Form.Label>Sumbit File</Form.Label>
  <Form.File />
</Form.Group>
```