Guides
Conditional Fields
Show and hide fields based on other form values
Form Wire supports conditional visibility — fields that appear or disappear based on the current form state.
The When Component
Use <When> to conditionally render fields:
<Account.Form action={submit}>
<Account.Field name="accountType" />
<Account.Field name="email" />
<Account.When
matches={(values) => values.accountType === "business"}
>
<Account.Field name="company" />
</Account.When>
</Account.Form>matches Predicate
The matches prop receives the current form values and returns a boolean:
matches={(values) => values.accountType === "business"}The values object uses the same type as your schema output — fully typed when using createFormWire.
field / equals Shorthand
For simple equality checks:
<Account.When field="accountType" equals="business">
<Account.Field name="company" />
</Account.When>Fallback Content
Show content when the condition is false:
<Account.When matches={isBusiness}>
<Account.Field name="company" />
<Account.When
matches={(values) => values.company?.endsWith(" LLC") ?? false}
>
<Account.Field name="llcType" />
</Account.When>
</Account.When>requiredWhenVisible
Fields inside <When> can be required only when visible:
fields: {
company: {
label: "Company",
requiredWhenVisible: (values) => values.accountType === "business",
},
}When the field is visible and the predicate is true, validation enforces it as required. When hidden, it's skipped entirely.
hidden, readOnly, disabled Predicates
These config options accept boolean predicates:
fields: {
company: {
hidden: (values) => values.accountType !== "business",
readOnly: (values) => values.locked === true,
disabled: (values) => values.frozen === true,
},
}Hidden fields are rendered as <input type="hidden"> and included in form submission.