NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Material Classic skin demo

Material Classic Demo

Contribute to this page

This demo shows an example form using the classical Material Design web components together with TinyMCE with the Material Classic skin and Material icon pack.

TinyMCE HTML JS Edit on CodePen.io

Registered by

Date

I agree to the Terms and conditions

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">

<div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6" data-mdc-auto-init="MDCTextField">
            <div class="mdc-text-field" style="width: 100%">
                <input type="text" id="my-text-field" class="mdc-text-field__input">
                <label class="mdc-floating-label" for="my-text-field">Registered by</label>
                <div class="mdc-line-ripple"></div>
            </div>
        </div>

        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6" data-mdc-auto-init="MDCTextField">
            <div class="mdc-text-field" style="width: 100%">
                <input type="text" id="my-text-field" class="mdc-text-field__input">
                <label class="mdc-floating-label" for="my-text-field">Date</label>
                <div class="mdc-line-ripple"></div>
            </div>
        </div>

        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
            <textarea id="premiumskinsandicons-material-classic"></textarea>
        </div>


        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
            <div class="mdc-form-field">
                <div class="mdc-checkbox">
                    <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1"/>
                    <div class="mdc-checkbox__background">
                        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                            <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                        </svg>
                        <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                </div>
                <label for="checkbox-1">I agree to the <a href="#">Terms and conditions</a></label>
            </div>
        </div>

        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
            <div style="text-align: right;">
                <button class="foo-button mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Submit Claim</button>
            </div>
        </div>
    </div>
</div>

<script>
    mdc.autoInit();
</script>

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.