Custom attributes

With Meta Box, you can add custom attributes for inputs like text, URL, email field. This feature is very helpful if developers want to add HTML5 attributes or something like data-* attribute for their custom JavaScript code.

How to add custom attributes to fields

To add custom attributes to the fields, click the Advanced tab in the field settings, and click the Add New button under Custom HTML5 Attributes:

Then add your attribute name and value.

Not a premium user?

This instruction uses Meta Box Builder extension, which is a premium extension and is already bundled in Meta Box AIO and MB Core. If you're not a premium user, please purchase a license to use it. However, you can do this with code. See below for more information.

Currently, this feature is supported in text, URL, email, checkbox, radio, date, time, datetime fields.

Complex values

By default, custom attributes accept strings as keys and values. If you want to enter complex values, like array, please use the dot notation or JSON notation.

Adding custom attributes with code

Custom attributes are registered as an array attributes in the field settings, in format 'key' => 'value' like this:

'fields' => [
    [
        'name'       => 'Username',
        'id'         => 'text',
        'type'       => 'text',
        'attributes' => [
            'required'  => true,
            'minlength' => 10,
        ],
    ],
],

If you want to add a custom data-* attribute, you can add it like this:

'attributes' => [
    // Simple value
    'data-option1'  => 'value1',
    // Array of values
    'data-option2'  => json_encode( ['key1' => 'value1', 'key2' => 'value2'] ),
],

Common attributes

There are several attributes that you can set under the attributes array, or directly in the field settings (e.g. outside the attributes array).

So, you can write like this:

'fields' => [
    [
        'name'       => 'Username',
        'id'         => 'text',
        'type'       => 'text',
        'attributes' => [
            'required'  => true,
            'minlength' => 10,
        ],
    ],
],

Or like this:

'fields' => [
    [
        'name'       => 'Username',
        'id'         => 'text',
        'type'       => 'text',
        'required'  => true,
        'minlength' => 10,
    ],
],

Here is the list of common attributes:

• disabled
• required
• autofocus
• readonly
• maxlength
• minlength
• pattern