Tab field
Purpose
Splits a long form into tabs. Only the fields of the selected tab are shown. Works at the top level and inside Field Sets, Collection items and Section Builder sections.
A tab's fields can be set up in two ways; both give one tab bar:
- Fields inside the tab (drag them into the tab in the builder). Tabs next to each other form one tab bar.
- Fields below the tab (the flat style, as in ACF). A tab with no fields inside it shows the fields below it, up to the next tab.
Tab "Hero" ← no fields inside
Title
Image
Tab "Key figures" ← no fields inside
Stats
→ one tab bar: Hero | Key figures
Field type name
tab
Settings
| Setting | Description |
|---|---|
| Instructions | Help text for editors, shown with the field. |
| Tab Placement | Horizontal tabs above the fields, or vertical tabs on the left. The first tab of a tab bar decides. Options: top (Horizontal), left (Vertical). |
| Label Placement | Where the labels of the fields in this tab go. Options: group (same as the field group), top (above the fields), left (left of the fields: each label and its input on one row). Narrow side boxes and small screens always show labels above. |
| Open First | Show this tab when the edit screen opens. Without it, the first tab opens. |
| Label per language | The label and instructions per language code while editing in that language, e.g. {"nl": {"label": "Prijs"}}. Set on the Translation tab when WPML is active. See WPML. |
PHP return value
A tab has no value. Its fields keep their own names: cafe_get_field( 'phone' ) works whether "phone" is inside a tab or not.
Example
// Builder: Tab "Contact" → Phone, Email; Tab "Social" → Facebook URL.
echo esc_html( cafe_get_field( 'phone' ) );