## Forms

### Login Form

Username Please provide a username. Required. 30 characters or fewer. Letters and digits.
Password Required. 8 characters or more. Required. 8 characters or more.
Remember Me Keep me logged in for 30 days. Keep me logged in for 30 days.

* - Required field

HTML

    <form class="form--col" method="post" action="/authentication/login/">
                <div class="form__field">
                    <input
                        type="text"
                        name="username"
                        id="id_username"
                        class="form__field__input"
                        minlength="3"
                        maxlength="30"
                        placeholder="Username"
                        required
                        aria-labelledby="id_username_label"
                        aria-describedby="id_username_help id_username_error"
                    />
                    <label
                        for="id_username"
                        title="Please provide a username."
                        id="id_username_label"
                        class="form__field__label"
                    >
                        Username
                    </label>
                    <span id="id_username_help" class="form__field__help">
                        Please provide a username.
                    </span>
                    <span
                        id="id_username_error"
                        class="form__field__error"
                        aria-live="polite"
                    >
                        Required. 30 characters or fewer. Letters and digits.
                    </span>
                </div>

                <div class="form__field">
                    <input
                        type="password"
                        name="password"
                        id="id_password"
                        class=""
                        minlength="3"
                        maxlength="30"
                        placeholder="Password"
                        required
                        aria-labelledby="id_username_label"
                        aria-describedby="id_password_help id_password_error"
                    />
                    <label for="id_password" id="id_password_label" class="">
                        Password
                    </label>
                    <span id="id_password_help" class="form__field__help">
                        Required. 8 characters or more.
                    </span>
                    <span
                        id="id_password_error"
                        class="form__field__error"
                        aria-live="polite"
                    >
                        Required. 8 characters or more.
                    </span>
                </div>

                <div class="form__field">
                    <label for="id_remember_me" class="">Remember Me</label>
                    <input
                        type="checkbox"
                        name="remember_me"
                        id="id_remember_me"
                        class=""
                    />
                    <span id="id_remember_me_help" class="form__field__help">
                        Keep me logged in for 30 days.
                    </span>
                    <span
                        id="id_remember_me_error"
                        class="form__field__error"
                        aria-live="polite"
                    >
                        Keep me logged in for 30 days.
                    </span>
                </div>

                <button
                    type="button"
                    class="toggle-password"
                    data-password-toggle="id_password"
                    aria-pressed="false"
                >
                    👁 Toggle
                </button>

                <button type="submit" class="button button--solid">Login</button>

                <p>
                    <span class="req">*</span>
                    - Required field
                </p>
            </form>

Survey

Radio: Yes No

Name:

Deprecated: Marquee Disabled

Favorite:

Comments:

Progress:

Meter: 70%

Range Slider:

# Fieldsets, Legends, and Form Elements

Legend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

## Form Element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Text Field:

Text Area:

Select Element:

Radio Buttons:
Radio 1
Radio 2
Radio 3

Checkboxes:
Radio 1
Radio 2
Radio 3

Password:

File Input:

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!