Skip to content

Built in Field Types

Luiz Bills edited this page Mar 15, 2023 · 10 revisions

Input fields

Text

[
    'id' => 'phone',
    'type' => 'text',
    'title' => 'Phone',

    // optional
    'default' => '+55 11 99632-5152', 
	'attributes' => [
		'placeholder' => '+55 99 99999-9999',
    	'type' => 'tel',
	],
	'description' => 'Lorem ipsum dolor sit amet.', // optional
]

text preview

Select

[
	'id' => 'plan',
	'title' => 'Current Plan',
	'type' => 'select',
    // the select options are an array of keys and values
	'options' => [
		'plan-1' => 'Free',
		'plan-2' => 'Pro',
		'plan-3' => 'Business'
	],

    // optional
	'default' => 'plan-2',
    'attributes' => [
        'class' => ''
    ],
	'description' => 'Lorem ipsum dolor sit amet.',
]

select preview

Checkbox

Note: this field renders only one checkbox. For multiple checkbox use the checkboxes field (see below).

[
	'id' => 'send_email',
	'title' => 'Send emails',
	'type' => 'checkbox',

    // optional
    'label' => 'Yes', // default is "Enable"
	'default' => true, // default is false (unchecked)
	'description' => 'Lorem ipsum dolor sit amet.'
]

checkbox preview

Checkboxes

[
	'id' => 'favorite_fruits',
	'title' => 'Favorite fruits',
	'type' => 'checkboxes',
    // the checkbox group is an array of keys and values
	'options' => [
		'banana' => 'Banana',
		'apple' => 'Apple',
		'orange' => 'Orange'
	],

    // optional
	'default' => [ 'banana', 'apple' ],
	'description' => 'Lorem ipsum dolor sit amet.'
]

checkboxes preview

Radio

[
	'id' => 'favorite_color',
	'title' => 'Favorite color',
	'type' => 'radio',
    // the radio group is an array of keys and values
	'options' => [
		'red' => 'Red',
		'blue' => 'Blue',
		'cyan' => 'Cyan'
	],
	'default' => 'blue', // optional
	'description' => 'Lorem ipsum dolor sit amet.' // optional
],

radio preview

Textarea

[
	'id' => 'content',
	'title' => 'Content',
	'type' => 'textarea',
	
    // optional
	'attributes' => [
        'rows' => 5
    ],
    'description' => 'Lorem ipsum dolor sit amet.',

textarea preview

Visual fields

Title

This field generates a <h1> title with a optional description.

By default, every page will have a title inserted at the top.

[
	'type' => 'title',
	'title' => 'Hello World',

    // optional
    'tag' => 'h3', // default is "h2"
	'description' => 'Lorem ipsum dolor sit amet.',
]

Title preview

Submit

This field generates submit button.

By default, every page will have a submit button inserted at the bottom.

[
	'type' => 'submit',

    // optional
	'title' => 'Click to Save', // default is "Save Changes"
]

Submit preview