How can I change a node edit form so that boolean fields use a toggle switch instead of a checkbox? Currently they look like this

enter image description here

and I would like to update them to be more intuitive like this (https://codepen.io/alvarotrigo/pen/YzEdrKj)

enter image description here

I think what I need to do is implement a custom widget as described here (https://www.drupal.org/docs/creating-custom-modules/creating-custom-field-types-widgets-and-formatters/create-a-custom-field-widget) but there really aren't any good docs or guides on this.

The example given there just uses a regular text field, how do I alter the HTML & CSS markup to be a toggle switch?

1 Answer 1


The doc you've linked shows that you need to define a render array for you element. You can attach an asset to it using ['#attached'] array key. See https://www.drupal.org/docs/creating-modules/adding-assets-css-js-to-a-drupal-module-via-librariesyml#s-attaching-a-library-to-a-form.

  • That's for attaching a CSS or JS file though, right? I want to change the actual HTML markup used and doing it with JS seems kinda janky
    – Robert
    Aug 28, 2022 at 9:54
  • 2
    You probably won’t want to change the markup - it needs to stay as an input for accessibility. Using JS to enhance form elements is standard practice
    – Clive
    Aug 28, 2022 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.