---
title: Form
category: Forms
---

```jsx live
render(() => {
  const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
  return (
    <Form
      initialPayload={value}
      onSubmit={(payload, complete) => {
        setTimeout(() => {
          setValue(payload)
          complete()
        }, 1600)
      }}
    >
      {({ editButtonProps, getFieldProps }) => (
        <StackView
          minWidth={64}
          padding={2}
          spacing={1}
          backgroundColor="primary-light"
        >
          <StackView axis="horizontal" alignment="center" spacing={1}>
            <Input.Inline fontSize={0} light {...getFieldProps('name')} />
            <Button size="xs" theme="light" {...editButtonProps} />
            <Icon name="split" size="md" color="light-6" />
            <Icon name="tag" size="md" color="light-6" />
          </StackView>
        </StackView>
      )}
    </Form>
  )
})
```

```jsx live
render(() => {
  const [state, setState] = React.useState({
    name: 'Chris Tomlin',
    minutes: 8,
    seconds: 0,
    bpm: 65,
    meter: '4/4',
  })
  return (
    <Form
      initialPayload={state}
      onSubmit={(payload, complete) => {
        setTimeout(() => {
          setState(payload)
          complete()
        }, 1600)
      }}
    >
      {({ editButtonProps, getFieldProps, isEditing, isSubmitting }) => (
        <StackView
          padding={2}
          spacing={1}
          backgroundColor="backgroundSecondary"
        >
          <StackView axis="horizontal" alignment="center" marginBottom={1}>
            <Button
              size="xs"
              theme="primary"
              variant="outline"
              order={1}
              marginLeft={1}
              {...editButtonProps}
            />
            <Input.Inline fontSize={0} order={0} {...getFieldProps('name')} />
          </StackView>
          <StackView axis="horizontal" alignment="center" spacing={2}>
            <StackView axis="horizontal" alignment="center">
              <Input.InputLabel
                controls="minutes"
                fontSize={1}
                color="foregroundSecondary"
                marginRight={1}
              >
                Length:
              </Input.InputLabel>
              <NumberField
                id="minutes"
                as={Input.Inline}
                min={0}
                max={59}
                pad={1}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('minutes', (value) => value)}
              />
              <Text fontSize={1} marginHorizontal={0.5}>
                :
              </Text>
              <NumberField
                as={Input.Inline}
                min={0}
                max={59}
                pad={2}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('seconds', (value) => value)}
              />
            </StackView>
            <StackView axis="horizontal" alignment="center" spacing={1}>
              <Input.InputLabel
                controls="bpm"
                fontSize={1}
                color="foregroundSecondary"
              >
                BPM:
              </Input.InputLabel>
              <NumberField
                id="bpm"
                as={Input.Inline}
                min={0}
                pad={1}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('bpm', (value) => value)}
              />
            </StackView>
            <StackView axis="horizontal" alignment="center" spacing={1}>
              <Input.InputLabel
                controls="meter"
                fontSize={1}
                color="foregroundSecondary"
              >
                Meter:
              </Input.InputLabel>
              <Select.Inline
                id="meter"
                fontSize={1}
                {...getFieldProps('meter', (event) => event.value)}
              >
                <Select.Option value="none">None</Select.Option>
                <Select.Option value="2/2">2/2</Select.Option>
                <Select.Option value="2/4">2/4</Select.Option>
                <Select.Option value="3/4">3/4</Select.Option>
                <Select.Option value="4/4">4/4</Select.Option>
              </Select.Inline>
            </StackView>
          </StackView>
        </StackView>
      )}
    </Form>
  )
})
```