@{ 
    var countries = new[] { "US", "UK", "Japan", "Germany", "France", "Italy", "Russia", "China", "India", "Korea", "Spain", "Canada", "Denmark", "Sweden", "Holland", "Norway", "Portugal" };
    var colors = new[] { "Black", "White", "Grey", "Red", "Green", "Blue", "Yellow", "Pink", "Purple", "Orange" };
}

<h1>
    Material Design
</h1>
<p>
    This sample uses C1 MVC's pseudo-classes to implement
    a form with dynamic labels, validation, and focus
    indicators similar to those in Google's Material Design
    spec.
</p>
<form>
    <div class="wj-dialog-header" tabindex="-1">
        Edit Item
    </div>
    <div class="wj-dialog-body">
        <!-- personal information -->
        <div class="wj-labeled-input">
            <div id="name" autocomplete="name" required accesskey="n">
            </div>
            <label for="name"><span class="accesskey">N</span>ame</label>
            <div class="wj-error" tabindex="-1">We do need your name...</div>
            @Html.C1().ComboBox("#name").IsEditable(true).IsRequired(true).ShowDropDownButton(false)
        </div>
        <div class="wj-labeled-input">
            <div id="email" autocomplete="email" required pattern="\S+@Html.Raw("@")\S+\.\S+" accesskey="e">
            </div>
            <label for="email"><span class="accesskey">E</span>-mail</label>
            <div class="wj-error" tabindex="-1">We need a valid e-mail...</div>
            @Html.C1().ComboBox("#email").IsEditable(true).IsRequired(true).ShowDropDownButton(false)
        </div>
        <div class="wj-labeled-input">
            <div id="country" items-source="countries" accesskey="c">
            </div>
            <label for="country"><span class="accesskey">C</span>ountry</label>
            @Html.C1().ComboBox("#country").Bind(countries).IsRequired(false).IsEditable(true).Text("")
        </div>
        <div class="wj-labeled-input">
            <div id="card" autocomplete="ccnumber" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}" accesskey="r">
            </div>
            <label for="card">C<span class="accesskey">r</span>edit Card #</label>
            <div class="wj-error" tabindex="-1">Four groups of four digits...</div>
            @Html.C1().InputMask("#card").IsRequired(false).Value("").Mask("9999 9999 9999 9999")
        </div>

        <!-- transaction information -->
        <div class="wj-labeled-input">
            <div id="date" accesskey="d">
            </div>
            <label for="date"><span class="accesskey">D</span>ate</label>
            @Html.C1().InputDate("#date").IsRequired(false).Value(null)
        </div>
        <div class="wj-labeled-input">
            <div id="time" accesskey="t">
            </div>
            <label for="time"><span class="accesskey">T</span>ime</label>
            @Html.C1().InputTime("#time").IsRequired(false).Min(new DateTime(1, 1, 1, 8, 0, 0)).Max(new DateTime(1, 1, 1, 18, 0, 0)).Value(null)
        </div>
        <div class="wj-labeled-input">
            <div id="qty" accesskey="q">
            </div>
            <label for="quantity"><span class="accesskey">Q</span>uantity</label>
            @Html.C1().InputNumber("#qty").IsRequired(false).Format("n0").Step(1).Value(null)
        </div>
        <div class="wj-labeled-input">
            <div id="discount" accesskey="i">
            </div>
            <label for="discount">D<span class="accesskey">i</span>scount</label>
            @Html.C1().InputNumber("#discount").IsRequired(false).Format("p0").Step(0.05).Min(0).Max(0.2).Value(null)
        </div>
        <div class="wj-labeled-input">
            <div id="colors" accesskey="f">
            </div>
            <label for="colors"><span class="accesskey">F</span>avorite Colors</label>
            @Html.C1().MultiSelect("#colors").Bind(colors).HeaderFormat("{count:n0} favorite colors")
        </div>
    </div>

    <div class="wj-dialog-footer">
        <button class="btn btn-primary" type="submit">OK</button>
        <button class="btn btn-default wj-hide-cancel">Cancel</button>
    </div>
</form>