How to make a flip switch field in Craft CMS

Oscar de la Hera Gomez
A flower of a Craft CMS field with the text "Lightswitch" beneath it.

A step by step tutorial on making lightswitch fields in Craft CMS.

The following tutorial walks you through how to create lightswitch (flip switch) fields in Craft CMS. We recommend downloading and setting up out Open Source Craft CMS starter project and carrying out the steps below.

Step One: Select Settings

A screenshot of Craft CMS with a highlight on "Settings" on the left menu sidebar.

From the left menu side bar, select Settings.

Step Two: Select Fields

A screenshot of the Settings Craft CMS screen with a highlight on "Fields".

In the screen that appears, select Fields under Content.

Step Three: Select + New field

A screenshot of the Fields Craft CMS screen with a highlight on the "+ New field" button on the top right of the screen.

Select the + New field button on the top right of the screen.

Step Four: Complete the field

A screenshot of the Create a Field Craft CMS screen with a highlight on the Field Type Dropdown that allows you to select the field type that you would like to create. A second highlight can be found on the top right of the image, which indicates that the save button is found on the top right of the screen. Press this once you have completed the form for the field you wish to create.

In the screen that appears, select Lightswitch from the Field Type drop down and complete the Name, Handle parameters. You can also set the default instructions, the default value or add a text parameter for the off and on label.

In terms of setting the group, we recommend that you create the field under the Lightswitch Field Group. To learn how we group fields or how to create a field group, please consult the tutorial below.

Once you are done, press Save on the top right of the screen.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details