# WithField Component

WithField lets you pull values from form state and display them in your application.

There are few ways you can use the WithField component.

1. If you don't pass it a child it will print the value of the selected field
2. If you pass it a child it will only render the children when the selected field is truthy
3. If you pass it a function as a child it will call the function with the value of the selected field and the current path

{/* prettier-ignore-start */}
```tsx live
<Form>
  <Label label="Name">
    <Input prop="name" placeholder="Type test" />
  </Label>
  <ol>
    <li>
      <WithField prop="name" />
    </li>
    <li>
      <WithField prop="name">
        Only displays when name is not empty
      </WithField>
    </li>
    <li>
      <WithField prop="name">
        {(nameValue) => <>Nice {nameValue}</>}
      </WithField>
    </li>
    <li>
      <WithField
        prop="name"
        select={(value) => value && Number(value) % 2 === 0}
      >
        Only displays when name is a number divisible by 2
      </WithField>
    </li>
  </ol>
</Form>
```
{/* prettier-ignore-end */}
