# Form for multiple children

```jsx live noInline top
// filename=my-form.jsx
/* This is the framework consumer application */
import { ChildFields } from "./child-fields"
import { Approvals } from "./approvals"

export function MyForm() {
  const form = useCreateForm({})
  return (
    <div className="App">
      <h3>Demo Form</h3>
      <hr />
      <h4>Add children's details</h4>

      <Form connect={form} onSubmit={alert}>
        <ValidationSummary />
        <Repeater prop="children">
          <Validate invalid={(val) => !val?.length}>
            <div>Must have at least one user</div>
          </Validate>
          <Validations />
          <RepeaterContent>
            <ChildFields />
          </RepeaterContent>
          <AddRepeaterItem initialValue={{}}>
            <button name="children" type="button" className="btn">
              Add
            </button>
          </AddRepeaterItem>
        </Repeater>
        <Approvals />
        <Submit />
        <Log>View form state</Log>
      </Form>
      <button className="btn" onClick={() => form.reset()}>
        Reset
      </button>
    </div>
  )
}
// filename=child-fields.jsx
export function ChildFields({ prop }) {
  const item = useRepeaterItem()

  const ChildName = (
    <WithField
      prop="username"
      select={(name) => name || `Child ${item.index + 1}`}
    />
  )

  return (
    <Group prop={prop}>
      <GroupWithErrorBorder>
        <section className="child">
          <div className="actions">
            <h2>
              {ChildName}{" "}
              <WithField
                prop="age"
                select={(age) => (age ? ` - ${age}/yo` : "")}
              />
            </h2>
            <RemoveRepeaterItem>
              <button type="button" className="btn">
                Remove
              </button>
            </RemoveRepeaterItem>
          </div>

          <Label label="Username" prop="username">
            <Input>
              <Validate required>
                <div>Username is required</div>
              </Validate>
              <Validations />
            </Input>
          </Label>

          <Label label="Email" prop="email">
            <Input resetOnError>
              <Validate required>
                <div>Email is required</div>
              </Validate>
              <Validate invalid={(email) => !email?.includes("@")}>
                <div>Email must be valid</div>
              </Validate>
              <Validations />
            </Input>
          </Label>

          <WithField prop="email">
            <Label label="Recieve promotions" prop="promotions">
              <Checkbox
                label={
                  <div>
                    <span>Send promotions to </span>
                    <span>
                      <WithField prop="../email" />
                    </span>
                  </div>
                }
              />
            </Label>
          </WithField>

          <Label prop="age" label="Age">
            <Input type="number" resetOnError>
              <Validate invalid={(age) => !age || age < 18}>
                <div>{ChildName} must be older than 18</div>
              </Validate>
              <Validations />
            </Input>
          </Label>
        </section>
      </GroupWithErrorBorder>
    </Group>
  )
}
// filename=approvals.jsx
export function Approvals({ prop = "approvals" }) {
  return (
    <Group prop={prop}>
      <Label prop="terms" label="Approve the terms and conditions">
        <Checkbox label={<span>Approve terms and conditions</span>}>
          <Validate required>
            <div>You must approve terms and conditions to continue</div>
          </Validate>
          <Validations />
        </Checkbox>
      </Label>
      <WithField prop="terms">
        {(val) => {
          return val ? (
            <Label label="Double check terms" prop="terms_2">
              <Checkbox
                value={{ nice: true }}
                label={<span>Double checked terms and conditions</span>}
              >
                <Validate required>
                  <div>You must also double check terms</div>
                </Validate>
                <Validations />
              </Checkbox>
            </Label>
          ) : null
        }}
      </WithField>
    </Group>
  )
}
// filename=index.jsx
import { MyForm } from "./my-form"
render(<MyForm />)
```
