Back

Drupal Forms User Guide

Common elements part 2 (Selects, checkboxes, radios, dates, times and files)

Select (drop-down)

What is your favourite colour? (Select other button)
What is your favourite number (Select other with select2 switched on)?

The Select field is a basic drop-down with a specific list of options. Users have to choose one of these options.

Select other includes 'Other...' as an option at the bottom of the list which causes a free text field to appear if it is selected.

If you have a lot of options, turn on the Select2 option in the field’s general settings. This adds a search box, so users can start typing to filter the options.

Checkbox

Use this if there is only one option to present to users. For example, to accept terms and conditions.

Checkboxes

Use these to allow users to select multiple options.

Do you like any of these colours? (Checkboxes)
Select five options (Checkboxes, Limited, Buttons - vertical)
Pick some colours (Checkboxes - other, Buttons - vertical)

Checkboxes other includes 'other...' by default at the end, and a free text field if it is selected.

If there are 3 or more options, select buttons vertical under element options in the field’s general settings.

By default, the user can select as many options as they like with a checkbox. You can switch this to a limited number of options. Note that this will still allow users to select more than than the limit, but the form will then throw an error on submission.

Radios (radio buttons)

Use these to allow users to select only one option of many.

Do you like grapefruit?
Which of these fruits do you prefer?
What is your favourite fruit?

Radios other includes 'other...' by default at the end, and a free text field if it is selected.

If there are 3 or more options, select buttons vertical under element options in the field’s general settings.

When should I use radios or selects?

Select elements offer a similar result to radio buttons. They both offer the ability to select just one option. Radio elements are much easier to read as they present all the options in one go, rather than hide them away, as a select does.

That said, if space is a premium, or your option text is on the long side, selects may be preferable to radios. As a rule of thumb, any radio with more than ten options is probably going to start taking up a lot of space, so switch to selects after that point.

Dates and Times  

There are a variety of dates and time pickers, depending on what information you need to gather.

The Date element uses a calendar popup to allow the user to select date. They can also enter the date manually.

The Time element gives options for the user to select hours, minutes and seconds from a picker, or manually type them in.  

Select ‘1 minute’ in time step in the field's general settings to hide the seconds.

The Date and time element displays both fields side by side.

In the date Date list, separate fields are given for day, month, year, hours, minutes and seconds. This is best for date of birth because the user can scroll quickly to a year further in the past. Hours, minutes and seconds can be unticked.

You can set a year range in the field’s general settings.

Switch on date year range reverse in the field’s general settings so that more recent years appear first. This is especially useful if asking for a child's date of birth.  

File upload

Usually used as proof of eligibility or to provide supporting evidence. Specific types of file upload field can be selected to restrict the upload to document, video, image or audio file types. 

One file only.
64 MB limit.
Allowed types: svg, jpg, jpeg, png, pdf, txt, doc, docx, ppt, pptx, xls, xlsx.

There are five different types of file uploader, with some being more specific to certain purposes like video, audio, image or business documents. The main File upload picker usually suffices for mosts needs as it covers all the media types.

You can specify how many documents can be uploaded in the Allowed number of values section.