# Path system

The Path system essentially treats form state as a directory structure. Every time you use a Group component you are navigating a level deeper in the file system (editing nested objects)

For example in the example below the Input would apply it's edits to `user/address/streetName` and the Select would apply it's edits to `user/address/state`

```jsx live
const initialValue = {
  user: {
    address: {
      streetName: "ABC",
      state: "NSW",
    },
  },
}

render(
  <Form
    style={{ maxWidth: 200 }}
    onChange={console.log}
    initialValue={initialValue}
  >
    <Group prop="user">
      <Group prop="address">
        <Input prop="streetName" />
        <Group prop="state">
          <Select options={["NSW", "ACT"]} />
        </Group>
      </Group>
    </Group>
  </Form>
)
```
