This component allows you to conditionally render based on a field being visited.
By default, fields are visited when blurred; unless they're checkboxes, then they're blurred by default.
{% hint style="info" %}
If you want to conditionally render based on the value of a checkbox, use IfFieldValue
instead.
{% endhint %}
Prop Name | Prop Type | Description |
---|---|---|
children
|
Node | Any number of components. |
fallback
|
Node |
Fallback component that displays when. This will change in a future version. |
name
|
String | The base field name without a / . |
import {
IfFieldVisitation,
OneForm,
} from '@oneform/react'
const ConditionalFieldVisitationExample = () => (
<OneFormProvider
values={{
firstName: '',
}}
>
<div>
<IfFieldVisitation name="firstName">
That's a nice name.
</IfFieldVisitation>
</div>
</OneFormProvider>
)
export default ConditionalFieldVisitationExample
This is probably most useful when:
- You have a flow of information and want to limit showing new fields until other fields have been visited.