List of form element types in Drupal 8/9

lakshmi , Credit to  volkotech-solutions May 20

Drupal core includes several input #type elements that can be used in forms. A form controller's buildForm(array $form, FormStateInterface $form state) method returns an associative array, usually named $form, that defines the markup and input elements of your form. Each element in the array is made up of a set of properties and potentially nested child elements that define the information Drupal uses to generate the HTML version of the form.

List of form element types:

Name

Description

Example

Button

#type => ‘button’ 

Provides a form element with an action button.

$form['actions']['preview'] = [

'#type' => 'button',

'#value' => $this->t('Preview'), ];

Checkbox

#type => ‘checkbox’

A single checkbox form element is provided.

$form['copy'] = [

'#type' => 'checkbox',

'#title' => $this->t('Send me a copy'), ];

Checkboxes

#type => 'checkboxes' 

A multiple checkboxs form element is provided.

$form['favorites']['colors'] = [

'#type' => 'checkboxes',

'#options' => ['blue' => $this->t('Blue'), 'red' => $this->t('Red')],

'#title' => $this->t('Which colors do you like?'), ];

Color

#type => 'color'

Provides a colour selection form element.

$form['color'] = [

'#type' => 'color',

'#title' => $this->t('Color'),

'#default_value' => '#ffffff', ];

Date

#type => 'date'

A date selection form element is provided.

$form['expiration'] = [

'#type' => 'date',

'#title' => $this->t('Content expiration'),

'#default_value' => '2020-02-05', ];

Datelist

#type => 'datelist'

Provides a datelist element, which is made up of a set of pre-configured select elements for selecting a date.

$form['expiration'] = [

'#type' => 'datelist',

'#title' => $this->t('Content expiration'), ];

Datetime

#type => 'datetime'

A datetime element is provided.

$form['expiration'] = [

'#type' => 'datetime',

'#title' => $this->t('Content expiration'), ];

Email

#type => 'email'

A form input element for entering an email address is provided.

$form['email'] = [

'#type' => 'email',

'#title' => $this->t('Email'),

'#pattern' => '*@example.com', ];

EntityAutocomplete

#type => 'entity_autocomplete'

An entity autocomplete form element is provided.

$form['my_element'] = [

'#type' => 'entity_autocomplete',

'#target_type' => 'node',

'#tags' => TRUE,

'#default_value' => $node,

'#selection_handler' => 'default',

'#selection_settings' => [

'target_bundles' => ['article', 'page'], ],

'#autocreate' => [

'bundle' => 'article',

'uid' => 1, ], ];

File

#type => 'file'

This form element allows you to upload a file.

$form['file'] = [

'#type' => 'file',

'#title' => $this->t('Upload File'), ];

Hidden

#type => 'hidden'

This form element is for an HTML'hidden' input element.

$form['entity_id'] = [

'#type' => 'hidden',

'#value' => $entity_id, ];

Image Button

#type => 'image_button'

This form element contains an image for a submit button.

$form['imagebutton'] = [

'#type' => 'image_button',

'#src' => '/themes/bartik/logo.png', ];

Item

#type => 'item'

A display-only form element with an optional title and description is provided.

$form['my_item'] = [

'#type' => 'item',

'#title' => t('Title of the item'),

'#markup' => t('This is the markup'), ];

Language Configuration

#type => 'language_configuration'

Defines a language configuration element for a single field.

$form['language_configuration'] = [

'#type' => 'language_configuration',

'#entity_information' => [

'entity_type' => 'node',

'bundle' => $type->article, ], ];

Language Select

#type => 'language_select'

A language selection form element is provided.

$form['language_cselect'] = [

'#type' => 'language_select',

'#title' => t('select a language '), ];

Machine Name

#type => 'machine_name'

A machine name form element is provided, which consists of a textfield for human-readable input and another textfield that generates a machine name based on the input.

$form['id'] = [

'#type' => 'machine_name',

'#maxlength' => 64,

'#description' => $this->t('A unique name for this item. It must only contain lowercase letters, numbers, and underscores.'), ];

Managed File

#type => 'managed_file'

Provides an AJAX/progress aware file upload and saves the widget. Drupal manages files by keeping them as entities.

 

$form['managed_files'] = [

'#type' => 'managed_file',

'#title' => t('Manged file '), ];

Number

#type => 'number'

This form element accepts numeric input and performs unique numeric validation.

$form['quantity'] = [

'#type' => 'number',

'#title' => $this->t('Quantity'), ];

Password

#type => 'password'

A form element for entering a password with hidden text is provided.

$form['pass'] = [

'#type' => 'password',

'#title' => $this->t('Password'),

'#size' => 25,

'#pattern' => '[01]+', ];

Password Confirm

#type => 'password_confirm'

Provides a form element for password double-input.

$form['pass'] = [

'#type' => 'password_confirm',

'#title' => $this->t('Password'),

'#size' => 25, ];

PathElement

#type => 'path'

Provides a form element for entering a path, which can be validated and stored as either a \Drupal\Core\Url value object or an array containing a route name and route parameters pair.

$form['path'] = [

'#type' => 'path',

'#title' => $this->t('Enter a path'), ];

Radio

#type => 'radio'

This form element contains a single radio button.

$form['single_radio'] = [

'#type' => 'radio',

'#title' => ('Are you above 18 years old?'), ];

Radios

#type => 'radios'

A form element for a group of radio buttons.

$form['Multiple_radios'] = [

'#type' => 'radios',

'#title' => ('Are you above 18 years old?'),

'#options' => [

'Yes' =>t('Yes'),

'No' =>t('No') ], ];

Range

#type => 'range'

A slider is provided for entering a number within a specific range.

$form['quantity_range'] = [

'#type' => 'range',

'#title' => $this->t('Quantity'), ];

Search

#type => 'search'

This HTML5 input element has the type "search."

$form['search'] = [

'#type' => 'search',

'#title' => $this->t('Search'), ];

Select

#type => 'select'

A form element for a drop-down menu or scrolling selection box is provided.

$form['gender'] = [

'#type' => 'select',

'#title' => ('Gender'),

'#options' => [

'Female' => t('Female'),

'male' => t('Male'), ], ];

Submit

#type => 'submit'

A form submit button is provided.

$form['actions']['submit'] = [

'#type' => 'submit',

'#value' => $this->t('Save'), ];

Table

#type => 'table'

Provides a table render element.

$form['contacts'] = [

'#type' => 'table',

'#caption' => $this->t('Sample Table'),

'#header' => [

$this->t('Name'),

$this->t('Phone'), ], ];

for ($i = 1; $i <= 4; $i++) {

$form['contacts'][$i]['#attributes'] = [

'class' => [

'foo',

'baz', ], ];

$form['contacts'][$i]['name'] = [

'#type' => 'textfield',

'#title' => $this->t('Name'),

'#title_display' => 'invisible', ];

$form['contacts'][$i]['phone'] = [

'#type' => 'tel',

'#title' => $this->t('Phone'),

'#title_display' => 'invisible', ];

}

$form['contacts'][]['colspan_example'] = [

'#plain_text' => 'Colspan Example',

'#wrapper_attributes' => [

'colspan' => 2,

'class' => [

'foo',

'bar', ], ], ];

Table Select

#type => 'tableselect'

A form element for a table with radio buttons or checkboxes in the left column.

$header = [

'color' => $this->t('Color'),

'shape' => $this->t('Shape'), ];

$options = [

1 => [

'color' => 'Red',

'shape' => 'Triangle', ],

2 => [

'color' => 'Green',

'shape' => 'Square', ],

3 => [

'color' => 'Blue',

'shape' => 'Hexagon', ], ];

$form['table'] = [

'#type' => 'tableselect',

'#header' => $header,

'#options' => $options,

'#empty' => $this->t('No shapes found'), ];

Tel

#type => 'tel'

This form element allows you to enter a telephone number.

$form['mobile_number'] = [

'#type' => 'tel',

'#title' => t('Mobile no'), ];

Textarea

#type => 'textarea'

A form element for multiple-line text input is provided.

$form['text'] = [

'#type' => 'textarea',

'#title' => $this->t('Text'), ];

Text Field

#type => 'textfield'

A one-line text field form element is provided.

$form['first_name'] = [

'#type' => 'textfield',

'#title' => t('First Name:'),

'#required' => TRUE, ];

Url

#type => 'url'

Provides a form element for entering a URL, complete with built-in URL validation.

form['homepage'] = [

'#type' => 'url',

'#title' => $this->t('Home Page'),

'#size' => 30,

'#pattern' => '*.example.com', ];

Value

#type => 'value'

Provides an internal information storage form element.

$form['entity_id'] = [

'#type' => 'value',

'#value' => $entity_id, ];

Vertical Tabs

#type => 'vertical_tabs'

Provides a render element for a form's vertical tabs.

$form['information'] = [

'#type' => 'vertical_tabs',

'#default_tab' => 'edit-publication',

];

$form['author'] = [

'#type' => 'details',

'#title' => $this->t('Author'),

'#group' => 'information', ];

$form['author']['name'] = [

'#type' => 'textfield',

'#title' => $this->t('Name'), ];

$form['publication'] = [

'#type' => 'details',

'#title' => $this->t('Publication'),

'#group' => 'information', ];

$form['publication']['publisher'] = [

'#type' => 'textfield',

'#title' => $this->t('Publisher'), ];

Weight

#type => 'weight'

Provides a form element for weight input. Integers are used to indicate order, with greater numbers appearing later in the list.

$form['weight'] = [

'#type' => 'weight',

'#title' => $this->t('Weight'),

'#default_value' => $edit['weight'],

'#delta' => 10, ];

Conclusion: 

This blog explains all of the form element types along with examples provided by Drupal core and links to the documentation for each.

Comments