{"id":271,"date":"2026-04-02T11:27:45","date_gmt":"2026-04-02T11:27:45","guid":{"rendered":"https:\/\/nativecustomfields.com\/docs\/components\/box\/"},"modified":"2026-04-02T11:27:45","modified_gmt":"2026-04-02T11:27:45","slug":"box","status":"publish","type":"ncf-documentation","link":"https:\/\/nativecustomfields.com\/docs\/components\/box\/","title":{"rendered":"Box"},"content":{"rendered":"<div class=\"wp-markdown-block theme-github wp-block-telex-block-telex-wp-markdown-block\" data-theme=\"github\">\n\t\t\t\t<nav class=\"wp-markdown-block-toc\"><h2>Table of Contents<\/h2><ul><li><a href=\"#php-field-configuration-reference\">PHP Field Configuration Reference<\/a><\/li><li>&nbsp;&nbsp;<a href=\"#box\">Box<\/a><\/li><li>&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#1-base-parameters\">1) Base Parameters<\/a><\/li><li>&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#2-box-specific-parameters\">2) Box Specific Parameters<\/a><\/li><li>&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#3-php-array-schema\">3) PHP Array Schema<\/a><\/li><li>&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#3-hook-based-example-post-meta-config\">3) Hook-Based Example (Post Meta Config)<\/a><\/li><li>&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#4-stored-value-type\">4) Stored Value Type<\/a><\/li><\/ul><\/nav>\t\t<div class=\"markdown-body\">\n\t\t<h2 id=\"php-field-configuration-reference\">PHP Field Configuration Reference<\/h2>\n<h3 id=\"box\">Box<\/h3>\n<p>Use this config when <code>fieldType<\/code> is <code>box<\/code>.<\/p>\n<h4 id=\"1-base-parameters\">1) Base Parameters<\/h4>\n<table>\n<thead>\n<tr>\n<th>Parameter<\/th>\n<th>Required<\/th>\n<th>Type<\/th>\n<th>Default<\/th>\n<th>Choices<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>fieldType<\/code><\/td>\n<td>Yes<\/td>\n<td><code>string<\/code><\/td>\n<td><code>box<\/code><\/td>\n<td><code>box<\/code><\/td>\n<td>Sets control type.<\/td>\n<\/tr>\n<tr>\n<td><code>name<\/code><\/td>\n<td>Yes<\/td>\n<td><code>string<\/code><\/td>\n<td><\/td>\n<td><\/td>\n<td>Sets control name. Use snake_case.<\/td>\n<\/tr>\n<tr>\n<td><code>fieldLabel<\/code><\/td>\n<td>Yes<\/td>\n<td><code>string<\/code><\/td>\n<td><\/td>\n<td><\/td>\n<td>Sets control label.<\/td>\n<\/tr>\n<tr>\n<td><code>default<\/code><\/td>\n<td>No<\/td>\n<td><code>string<\/code><\/td>\n<td><\/td>\n<td><\/td>\n<td>Sets control default value.<\/td>\n<\/tr>\n<tr>\n<td><code>required<\/code><\/td>\n<td>No<\/td>\n<td><code>bool<\/code><\/td>\n<td><code>false<\/code><\/td>\n<td><code>true<\/code>, <code>false<\/code><\/td>\n<td>Sets control required.<\/td>\n<\/tr>\n<tr>\n<td><code>disabled<\/code><\/td>\n<td>No<\/td>\n<td><code>bool<\/code><\/td>\n<td><code>false<\/code><\/td>\n<td><code>true<\/code>, <code>false<\/code><\/td>\n<td>Sets control disabled.<\/td>\n<\/tr>\n<tr>\n<td><code>hideLabelFromVision<\/code><\/td>\n<td>No<\/td>\n<td><code>bool<\/code><\/td>\n<td><code>false<\/code><\/td>\n<td><code>true<\/code>, <code>false<\/code><\/td>\n<td>Sets control hide label from vision.<\/td>\n<\/tr>\n<tr>\n<td><code>fieldHelpText<\/code><\/td>\n<td>No<\/td>\n<td><code>string<\/code><\/td>\n<td><\/td>\n<td><\/td>\n<td>Sets control help text.<\/td>\n<\/tr>\n<tr>\n<td><code>className<\/code><\/td>\n<td>No<\/td>\n<td><code>string<\/code><\/td>\n<td><\/td>\n<td><\/td>\n<td>Sets control css class name.<\/td>\n<\/tr>\n<tr>\n<td><code>fieldLabelPosition<\/code><\/td>\n<td>No<\/td>\n<td><code>string<\/code><\/td>\n<td><code>top<\/code><\/td>\n<td><code>top<\/code>, <code>left<\/code><\/td>\n<td>Sets control label position.<\/td>\n<\/tr>\n<tr>\n<td><code>fieldLabelTextTransform<\/code><\/td>\n<td>No<\/td>\n<td><code>string<\/code><\/td>\n<td><code>uppercase<\/code><\/td>\n<td><code>uppercase<\/code>, <code>capitalize<\/code>, <code>lowercase<\/code><\/td>\n<td>Sets control label text transform.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"2-box-specific-parameters\">2) Box Specific Parameters<\/h4>\n<table>\n<thead>\n<tr>\n<th>Parameter<\/th>\n<th>Required<\/th>\n<th>Type<\/th>\n<th>Default<\/th>\n<th>Choices<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>allowReset<\/code><\/td>\n<td>No<\/td>\n<td><code>bool<\/code><\/td>\n<td><code>true<\/code><\/td>\n<td><code>true<\/code>, <code>false<\/code><\/td>\n<td>If true, a button to reset the box control is rendered.<\/td>\n<\/tr>\n<tr>\n<td><code>splitOnAxis<\/code><\/td>\n<td>No<\/td>\n<td><code>bool<\/code><\/td>\n<td><code>true<\/code><\/td>\n<td><code>true<\/code>, <code>false<\/code><\/td>\n<td>If true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"3-php-array-schema\">3) PHP Array Schema<\/h4>\n<p>Here is an example of how to use the box control in a post meta configuration:<\/p>\n<pre><code class=\"language-php\">[\n    &#039;fieldType&#039; =&gt; &#039;box&#039;,\n    &#039;name&#039; =&gt; &#039;post_box&#039;,\n    &#039;fieldLabel&#039; =&gt; &#039;Post Box&#039;,\n    &#039;required&#039; =&gt; false,\n    &#039;disabled&#039; =&gt; false,\n    &#039;hideLabelFromVision&#039; =&gt; false,\n    &#039;fieldHelpText&#039; =&gt; &#039;Set box spacing values.&#039;,\n    &#039;className&#039; =&gt; &#039;custom-class&#039;,\n    &#039;fieldLabelPosition&#039; =&gt; &#039;top&#039;,\n    &#039;fieldLabelTextTransform&#039; =&gt; &#039;uppercase&#039;,\n    &#039;allowReset&#039; =&gt; true,\n    &#039;splitOnAxis&#039; =&gt; true,\n]\n<\/code><\/pre>\n<h4 id=\"3-hook-based-example-post-meta-config\">3) Hook-Based Example (Post Meta Config)<\/h4>\n<p>It is available to use this control in post meta fields, term meta fields and user settings page and options page fields.<\/p>\n<p>Available hooks:<\/p>\n<ul>\n<li>native_custom_fields_post_meta_fields<\/li>\n<li>native_custom_fields_term_meta_fields<\/li>\n<li>native_custom_fields_user_meta_fields<\/li>\n<li>native_custom_fields_options_page_fields<\/li>\n<\/ul>\n<pre><code class=\"language-php\">add_filter( &#039;native_custom_fields_post_meta_fields&#039;, function( array $configs ): array {\n    $post_type = &#039;book&#039;;\n\n    if ( ! isset( $configs[ $post_type ] ) || ! is_array( $configs[ $post_type ] ) ) {\n        $configs[ $post_type ] = [\n            &#039;post_type&#039; =&gt; $post_type,\n            &#039;sections&#039;  =&gt; [],\n        ];\n    }\n\n    $configs[ $post_type ][&#039;sections&#039;][] = [\n        &#039;meta_box_id&#039;       =&gt; &#039;design_settings&#039;,\n        &#039;meta_box_title&#039;    =&gt; &#039;Design Settings&#039;,\n        &#039;meta_box_context&#039;  =&gt; &#039;side&#039;,\n        &#039;meta_box_priority&#039; =&gt; &#039;default&#039;,\n        &#039;fields&#039;            =&gt; [\n            [\n            &#039;fieldType&#039; =&gt; &#039;box&#039;,\n            &#039;name&#039; =&gt; &#039;post_box&#039;,\n            &#039;fieldLabel&#039; =&gt; &#039;Post Box&#039;,\n            &#039;required&#039; =&gt; false,\n            &#039;disabled&#039; =&gt; false,\n            &#039;hideLabelFromVision&#039; =&gt; false,\n            &#039;fieldHelpText&#039; =&gt; &#039;Set box spacing values.&#039;,\n            &#039;className&#039; =&gt; &#039;custom-class&#039;,\n            &#039;fieldLabelPosition&#039; =&gt; &#039;top&#039;,\n            &#039;fieldLabelTextTransform&#039; =&gt; &#039;uppercase&#039;,\n            &#039;allowReset&#039; =&gt; true,\n            &#039;splitOnAxis&#039; =&gt; true,\n            ],\n        ],\n    ];\n\n    return $configs;\n} );\n<\/code><\/pre>\n<h4 id=\"4-stored-value-type\">4) Stored Value Type<\/h4>\n<table>\n<thead>\n<tr>\n<th>Field Type<\/th>\n<th>Meta Value Type<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>box<\/td>\n<td>string (serialized JSON, for example <code>{\"top\":\"10px\",\"right\":\"10px\",\"bottom\":\"10px\",\"left\":\"10px\"}<\/code>)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"parent":264,"menu_order":0,"template":"","meta":[],"class_list":["post-271","ncf-documentation","type-ncf-documentation","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nativecustomfields.com\/wp-json\/wp\/v2\/ncf-documentation\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nativecustomfields.com\/wp-json\/wp\/v2\/ncf-documentation"}],"about":[{"href":"https:\/\/nativecustomfields.com\/wp-json\/wp\/v2\/types\/ncf-documentation"}],"up":[{"embeddable":true,"href":"https:\/\/nativecustomfields.com\/wp-json\/wp\/v2\/ncf-documentation\/264"}],"wp:attachment":[{"href":"https:\/\/nativecustomfields.com\/wp-json\/wp\/v2\/media?parent=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}