Visibility Rules

Make form fields conditionally visible based on the current record data. Fields can be hidden or shown based on other field values.

Basic Visibility

.form(({ v, f }) =>
  v.collectionForm({
    fields: [
      {
        type: "section",
        fields: [
          f.status,
          {
            field: f.cancellationReason,
            hidden: ({ data }) => data.status !== "cancelled",
          },
        ],
      },
    ],
  }),
)

The cancellationReason field only appears when status is "cancelled".

Reactive

Visibility rules are reactive — they re-evaluate as the user changes field values in the form. No page refresh needed.

Multiple Conditions

{
  field: f.isFeatured,
  hidden: ({ data }) => !data.isApproved,
}

Show isFeatured only when isApproved is true.

Read-Only Fields

Make a field visible but non-editable based on conditions:

{
  field: f.customerName,
  readOnly: ({ data }) => !!data.customer,
}

Section Visibility

Hide entire sections:

{
  type: "section",
  label: { en: "SEO" },
  hidden: ({ data }) => !data.isPublished,
  fields: [f.metaTitle, f.metaDescription],
}

Real-World Example

From the barbershop appointments form:

collections/appointments.ts

.form(({ v, f }) =>
  v.collectionForm({
    sidebar: {
      position: "right",
      fields: [f.status],
    },
    fields: [
      {
        type: "section",
        label: { en: "Booking Details" },
        layout: "grid",
        columns: 2,
        fields: [f.customer, f.barber, f.service, f.scheduledAt],
      },
      {
        type: "section",
        label: { en: "Notes" },
        fields: [f.notes],
      },
      {
        type: "section",
        label: { en: "Cancellation" },
        fields: [
          f.cancelledAt,
          {
            field: f.cancellationReason,
            hidden: ({ data }) => data.status !== "cancelled",
          },
        ],
      },
    ],
  }),
)

Form Views — Form configuration
Fields — Field types