Title: Toggle Switch Not Rendering
Last modified: January 27, 2023

---

# Toggle Switch Not Rendering

 *  [locustfist](https://wordpress.org/support/users/locustfist/)
 * (@locustfist)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/toggle-switch-not-rendering/)
 *     ```wp-block-code
       <div class="mdc-switch">
         <div class="mdc-switch__track"></div>
         <input type="checkbox" class="mdc-switch__native-control" id="my-switch" />
         <div class="mdc-switch__thumb-underlay">
           <div class="mdc-switch__thumb"></div>
         </div>
       </div>
       ```
   
 *     ```wp-block-code
       .mdc-switch:not(.mdc-switch--checked)
       .mdc-switch__track {
       	background-color: var(--md-sys-color-on-surface, #000);
       }
       ```
   
 * Above is the switch markup inside a function and what I believe is the CSS for
   the switch to render instead of a checkbox. I’m only getting a checkbox to show
   on the front end. What am I missing?

The topic ‘Toggle Switch Not Rendering’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/material-design-google/0.7.0/screenshot.
   png)
 * Material Design Google
 * [Support Threads](https://wordpress.org/support/theme/material-design-google/)
 * [Active Topics](https://wordpress.org/support/theme/material-design-google/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/material-design-google/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/material-design-google/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [toggle switch](https://wordpress.org/support/topic-tag/toggle-switch/)

 * 0 replies
 * 1 participant
 * Last reply from: [locustfist](https://wordpress.org/support/users/locustfist/)
 * Last activity: [3 years, 3 months ago](https://wordpress.org/support/topic/toggle-switch-not-rendering/)
 * Status: not resolved