Guide

Input Control

PHP Field Configuration Reference

Input

Use this config when fieldType is input.

1) Base Parameters

ParameterRequiredTypeDefaultChoicesDescription
fieldTypeYesstringinputinputSets control type.
nameYesstringSets control name. Use snake_case.
fieldLabelYesstringSets control label.
defaultNostringSets control default value.
requiredNoboolfalsetrue, falseSets control required.
disabledNoboolfalsetrue, falseSets control disabled.
hideLabelFromVisionNoboolfalsetrue, falseSets control hide label from vision.
fieldHelpTextNostringSets control help text.
classNameNostringSets control css class name.
fieldLabelPositionNostringtoptop, leftSets control label position.
fieldLabelTextTransformNostringuppercaseuppercase, capitalize, lowercaseSets control label text transform.

2) Input Specific Parameters

ParameterRequiredTypeDefaultChoicesDescription
idNostringThe id of the input element.
sizeNostringdefaultdefault, small, __unstable-large, compactAdjusts the size of the input.
placeholderNostringPlaceholder text for the input.
prefixNostringRenders an element before the input. Accepts text (e.g. "$", "https://") or WordPress icon names (e.g. "search", "external", "lock").
suffixNostringRenders an element after the input. Accepts text (e.g. "USD", ".com") or WordPress icon names (e.g. "search", "external", "lock").
typeNostringtexttext, tel, time, url, week, month, email, date, datetime-local, number, color, passwordType of the input element.
minNointMinimum value. Only applicable for number type.
maxNointMaximum value. Only applicable for number type.
stepNointAmount to increment/decrement. Only applicable for number type. Default is 1.
isPressEnterToChangeNoboolfalsetrue, falseIf true, the ENTER key confirmation is required in order to trigger an onChange.

3) PHP Array Schema

Here is an example of how to use the input control in a post meta configuration:

[
    'fieldType' => 'input',
    'name' => 'post_input',
    'fieldLabel' => 'Post Input',
    'required' => false,
    'disabled' => false,
    'hideLabelFromVision' => false,
    'fieldHelpText' => 'Enter a value.',
    'className' => 'custom-class',
    'fieldLabelPosition' => 'top',
    'fieldLabelTextTransform' => 'uppercase',
    'size' => 'default',
    'placeholder' => 'Enter value...',
    'type' => 'text',
    'isPressEnterToChange' => false,
]

3) Hook-Based Example (Post Meta Config)

It is available to use this control in post meta fields, term meta fields and user settings page and options page fields.

Available hooks:

  • native_custom_fields_post_meta_fields
  • native_custom_fields_term_meta_fields
  • native_custom_fields_user_meta_fields
  • native_custom_fields_options_page_fields
add_filter( 'native_custom_fields_post_meta_fields', function( array $configs ): array {
    $post_type = 'book';

    if ( ! isset( $configs[ $post_type ] ) || ! is_array( $configs[ $post_type ] ) ) {
        $configs[ $post_type ] = [
            'post_type' => $post_type,
            'sections'  => [],
        ];
    }

    $configs[ $post_type ]['sections'][] = [
        'meta_box_id'       => 'post_options',
        'meta_box_title'    => 'Post Options',
        'meta_box_context'  => 'side',
        'meta_box_priority' => 'default',
        'fields'            => [
            [
            'fieldType' => 'input',
            'name' => 'post_input',
            'fieldLabel' => 'Post Input',
            'required' => false,
            'disabled' => false,
            'hideLabelFromVision' => false,
            'fieldHelpText' => 'Enter a value.',
            'className' => 'custom-class',
            'fieldLabelPosition' => 'top',
            'fieldLabelTextTransform' => 'uppercase',
            'size' => 'default',
            'placeholder' => 'Enter value...',
            'type' => 'text',
            'isPressEnterToChange' => false,
            ],
        ],
    ];

    return $configs;
} );

4) Stored Value Type

Field TypeMeta Value Type
inputstring

Was this helpful?