import 'package:mdl/mdl.dart';

main() {
    registerMdl();
    componentFactory().run().then((_) {
    });
}
To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
<div class="demo-preview-block forms sample">
    <div class="firstblock">
        <p>
            justo. Morbi tincidunt vulputate urna vitae malesuada. Vivamus est erat, venenatis eu mauris ac, finibus
            cursus lectus. Nunc ultrices libero vitae est egestas consectetur. Aliquam dapibus, mi quis sollicitudin
            vestibulum, odio nulla ultrices erat, vel sagittis ligula sem et nunc.</p>
        <form method="post" class="right mdl-form mdl-form-registration demo-registration">
            <h5 class="mdl-form__title">Register for launch</h5>
            <div class="mdl-form__content">
                <div class="mdl-textfield mdl-js-textfield">
                    <input class="mdl-textfield__input" type="text" id="sample1" />
                    <label class="mdl-textfield__label" for="sample1">Name</label>
                </div>
                <div class="mdl-textfield mdl-js-textfield">
                    <input class="mdl-textfield__input" type="text" id="email" />
                    <label class="mdl-textfield__label" for="email">Email</label>
                </div>
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember_me">
                    <input type="checkbox" id="remember_me" class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Remember me</span>
                </label>
            </div>
            <div class="mdl-form__actions">
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">Login</button>
            </div>
        </form>
        <p>
            justo. Morbi tincidunt vulputate urna vitae malesuada. Vivamus est erat, venenatis eu mauris ac, finibus
            cursus lectus. Nunc ultrices libero vitae est egestas consectetur. Aliquam dapibus, mi quis sollicitudin
            vestibulum, odio nulla ultrices erat, vel sagittis ligula sem et nunc.</p>
    </div>
    <form method="post" class="mdl-form">
        <h5 class="mdl-form__title">Define your colors</h5>
        <div class="mdl-form__content">
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="text" id="sample1" />
                <label class="mdl-textfield__label" for="sample1">Name</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="email" id="email" />
                <label class="mdl-textfield__label" for="email">Email</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="tel" id="tel"/>
                <label class="mdl-textfield__label" for="tel">Telephone, (555) 555 5555</label>
            </div>
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="red1">
                <input type="checkbox" id="red1" class="mdl-checkbox__input" />
                <span class="mdl-checkbox__label">Red</span>
            </label>
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="green1">
                <input type="checkbox" id="green1" class="mdl-checkbox__input" />
                <span class="mdl-checkbox__label">Green</span>
            </label>
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="blue1">
                <input type="checkbox" id="blue1" class="mdl-checkbox__input" />
                <span class="mdl-checkbox__label">Blue</span>
            </label>
        </div>
        <div class="mdl-form__actions">
            <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Cancel</button>
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">Sign up</button>
        </div>
    </form>
    <form method="post" class="mdl-form">
        <h5 class="mdl-form__title">Define your colors (hor)</h5>
        <div class="mdl-form__content">
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="text" id="sample1" />
                <label class="mdl-textfield__label" for="sample1">Name</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="email" id="email" />
                <label class="mdl-textfield__label" for="email">Email</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="tel" id="tel"/>
                <label class="mdl-textfield__label" for="tel">Telephone, (555) 555 5555</label>
            </div>
            <div class="mdl-form__group">
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="red2">
                    <input type="checkbox" id="red2" class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Red</span>
                </label>
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="green2">
                    <input type="checkbox" id="green2" class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Green</span>
                </label>
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="blue2">
                    <input type="checkbox" id="blue2" class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Blue</span>
                </label>
            </div>
        </div>
        <div class="mdl-form__actions">
            <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Cancel</button>
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">Sign up</button>
        </div>
    </form>
    <form method="post" class="mdl-form">
        <h5 class="mdl-form__title">Define your colors (radio)</h5>
        <div class="mdl-form__content">
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="text" id="sample1" />
                <label class="mdl-textfield__label" for="sample1">Name</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="email" id="email" />
                <label class="mdl-textfield__label" for="email">Email</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" type="tel" id="tel"/>
                <label class="mdl-textfield__label" for="tel">Telephone, (555) 555 5555</label>
            </div>
            <div class="mdl-form__group">
                <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="red3">
                    <input type="radio" id="red3" class="mdl-radio__button" name="color[]"/>
                    <span class="mdl-radio__label">Red</span>
                </label>
                <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="green3">
                    <input type="radio" id="green3" class="mdl-radio__button" name="color[]" />
                    <span class="mdl-radio__label">Green</span>
                </label>
                <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="blue3">
                    <input type="radio" id="blue3" class="mdl-radio__button" name="color[]"/>
                    <span class="mdl-radio__label">Blue</span>
                </label>
            </div>
        </div>
        <div class="mdl-form__actions">
            <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Cancel</button>
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">Sign up</button>
        </div>
    </form>
    <form method="post" class="mdl-form demo-slider">
        <h5 class="mdl-form__title">Settings</h5>
        <div class="mdl-form__content">
            <div class="mdl-form__group">
                <i class="material-icons mdl-icon mdl-color-text--grey-600">volume_up</i>
                <div class="mdl-slider__container__container">
                    <span class="mdl-slider__label mdl-color-text--grey-500">Media volume</span>
                    <input class="mdl-slider mdl-js-slider" type="range"
                           min="0" max="100" value="30" tabindex="0"/>
                </div>
            </div>
            <div class="mdl-form__group">
                <i class="material-icons mdl-icon mdl-color-text--grey-600">alarm</i>
                <div class="mdl-slider__container__container">
                    <span class="mdl-slider__label mdl-color-text--grey-500">Alarm volume</span>
                    <input class="mdl-slider mdl-js-slider" type="range"
                           min="0" max="100" value="0" tabindex="0"/>
                </div>
            </div>
            <div class="mdl-form__group">
                <i class="material-icons mdl-icon mdl-color-text--grey-600">ring_volume</i>
                <div class="mdl-slider__container__container">
                    <span class="mdl-slider__label mdl-color-text--grey-500">Ring volume</span>
                    <input class="mdl-slider mdl-js-slider" type="range"
                           min="0" max="100" value="0" tabindex="0"/>
                </div>
            </div>
        </div>
    </form>
</div>
</div>

forms

...will be here soon