VCU Compass Web Framework

Form: All 

<form action="/" method="POST" class="cwf-form">

    <div class="cwf-form__field ">
        <label for="diploma_name" class="cwf-form__label">Full name</label>
        <p class="cwf-form__help">
            This field will be printed on your diploma
        </p>
        <input class="cwf-form__input" id="diploma_name" name="diploma_name" placeholder="Rodney the Ram" readonly required type="text" value="John Doe" />

    </div>

    <div class="cwf-form__field ">
        <label for="donation" class="cwf-form__label">Donation</label>
        <div class="cwf-form__group">
            <span class="cwf-form__symbol fas fa-dollar-sign">

            </span>
            <input class="cwf-form__input" id="donation" name="donation" placeholder="" type="number" value="100" />

            <span class="cwf-form__symbol ">
                .00
            </span>
        </div>

    </div>

    <div class="cwf-form__field cwf-form__field--error">
        <label for="phonetic_spelling" class="cwf-form__label">Phonetic spelling</label>
        <p class="cwf-form__help">
            The MC will use this to help pronounce your name as you walk across the stage
        </p>
        <p class="cwf-form__validation">
            This input does not accept special characters such as -@$%^*
        </p>
        <div class="cwf-form__icon fa-exclamation-circle">
            <input class="cwf-form__input" id="phonetic_spelling" name="phonetic_spelling" placeholder="rah-OOL gon-SAH-les" required type="text" value="Rod-Nee the RAM" />

        </div>

    </div>

    <div class="cwf-form__field ">
        <label for="diploma_pickup" class="cwf-form__label">Diploma pick up time</label>
        <p class="cwf-form__help">
            Our office offers three appointment times to pick up your diploma
        </p>
        <div class="cwf-form__icon cwf-form__icon--select">
            <select class="cwf-form__input" id="diploma_pickup" name="diploma_pickup" required>
                <option>
                    9:00 a.m.
                </option>
                <option selected>
                    10:00 a.m.
                </option>
                <option>
                    1:00 a.m.
                </option>
            </select>
        </div>
    </div>

    <div class="cwf-form__field ">
        <label for="memory" class="cwf-form__label">Favorite VCU memory</label>
        <p class="cwf-form__help">
            Share about a time at VCU you'll always remember
        </p>
        <textarea class="cwf-form__input" id="memory" name="memory" placeholder="..."></textarea>

    </div>

    <div class="cwf-form__field " id="tee_shirt" role="radiogroup" aria-label="Commemorative tee shirt size">
        <label for="tee_shirt" class="cwf-form__label">Commemorative tee shirt size</label>
        <p class="cwf-form__help">
            As a graduate, you'll get an awesome new VCU tee shirt
        </p>
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="sm" name="tee_shirt" type="radio" />
            <label class="cwf-form__label" for="sm">
                Small
            </label>
        </div>
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="md" name="tee_shirt" type="radio" />
            <label class="cwf-form__label" for="md">
                Medium
            </label>
        </div>
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="lg" name="tee_shirt" type="radio" />
            <label class="cwf-form__label" for="lg">
                Large
            </label>
        </div>
    </div>

    <div class="cwf-form__field " id="subscription" role="group" aria-label="Graduation addons">
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="mail" name="mail" type="checkbox" />
            <label class="cwf-form__label" for="mail">
                Mail me a complementary graduation program
            </label>
            <p class="cwf-form__help">
                Programs will be mailed June 10th
            </p>
        </div>
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="listserv" name="listserv" type="checkbox" checked />
            <label class="cwf-form__label" for="listserv">
                Subscribe me to the VCU Alumni newsletter
            </label>
        </div>
    </div>

    <div class="cwf-form__field ">
        <label for="password" class="cwf-form__label">Password</label>
        <p class="cwf-form__help">
            Must be at least 8 characters long
        </p>
        <input class="cwf-form__input" id="password" name="password" placeholder="********" required type="password" value="" />

    </div>

    <input type="submit" class="cwf-button" />

</form>
 
{% from './index.twig' import form %}
{% from '../button/index.twig' import button %}
{# Form content #}
{% set content %}
    {# Full name #}
    {% include './examples/text.twig' %}
    {# Donation #}
    {% include './examples/grouped.twig' %}
    {# Phonetic spelling #}
    {% include './examples/error.twig' %}
    {# Diploma pick up time #}
    {% include './examples/select.twig' %}
    {# Favorite VCU memory #}
    {% include './examples/textarea.twig' %}
    {# Commemorative tee shirt size #}
    {% include './examples/radio.twig' %}
    {# Graduation addons #}
    {% include './examples/checkbox.twig' %}
    {# Password #}
    {% include './examples/password.twig' %}
    {# Submit button #}
    {{
        button({
            element: 'input',
            type: 'submit'
        })
    }}
{% endset %}
{# Form #}
{{
    form({
        action: '/',
        method: 'POST',
        content: content
    })
}}
 
/* No context defined. */
  • Content: 
    // Form component styles

@use "../../shared/animation";
@use "../../shared/style";
@use "sass:list";

// Selector prefix
$prefix: "cwf" !default;

// Form colors
$input__background-color: style.color("white-dark") !default;
$input__background-color--disabled: style.darken(
    "white-dark",
    5.25%
) !default; // #ebebeb
$input__border-color: style.color("white-darkest") !default;
$input--placeholder__color: style.color("gray-lightest") !default;
$input--hover__border-color: style.color("gray-lightest") !default;
$input--focus__border-color: style.color("gray-darkest") !default;
$input--focus__background-color: style.color("white") !default;
$color--help: style.color("gray-lightest") !default;
$color--error: style.color("red", "accent") !default;
$color--success: style.color("green", "accent") !default;

// Form

.#{$prefix}-form {
    --cwf-form__input--background-color: #{$input__background-color};
    --cwf-form__input--disabled--background-color: #{$input__background-color--disabled};
    --cwf-form__input--border-color: #{$input__border-color};
    --cwf-form__input--placeholder--color: #{$input--placeholder__color};
    --cwf-form__input--hover--border-color: #{$input--hover__border-color};
    --cwf-form__input--focus--border-color: #{$input--focus__border-color};
    --cwf-form__input--focus--background-color: #{$input--focus__background-color};
    --cwf-form__help--color: #{$color--help};
    --cwf-form--error-color: #{$color--error};
    --cwf-form--success-color: #{$color--success};
}

// Field

.#{$prefix}-form__field {
    margin-bottom: 1rem;

    @include style.children("margins", "last");
}

// Label

.#{$prefix}-form__label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

// Input

.#{$prefix}-form__input {
    display: block;
    margin-bottom: 0.5rem;
    background-color: var(--cwf-form__input--background-color);
    resize: none;
    width: 100%;
    &:hover {
        border-color: var(--cwf-form__input--hover--border-color);
    }
    &:focus {
        border-color: var(--cwf-form__input--focus--border-color);
        background-color: var(--cwf-form__input--focus--background-color);
    }

    &::placeholder {
        color: var(--cwf-form__input--placeholder--color);
        opacity: 1;
    }

    &:disabled,
    &[readonly] {
        background-color: var(--cwf-form__input--disabled--background-color);
        color: var(--cwf-form__input--placeholder--color);
    }

    &:disabled:hover,
    &:disabled:focus {
        border-color: var(--cwf-form__input--border-color);
    }

    &[type="number"] {
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }
}

// Icon

.#{$prefix}-form__icon {
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 100%;
        @include style.icon;
        color: var(--cwf-form__input--hover--border-color);
        pointer-events: none;
    }

    .#{$prefix}-form__input {
        height: 100%;
        padding-right: 3rem;
    }

    select.#{$prefix}-form__input {
        appearance: none;
    }
}

.#{$prefix}-form__icon--select {
    &:before {
        content: "\f078";
        @include animation.transition(transform);
    }

    &:focus-within {
        &:before {
            @include animation.flip;
        }
    }
}

// Select option

.#{$prefix}-form__option {
    margin-bottom: 0.5rem;
}

.#{$prefix}-form__option--inline .#{$prefix}-form__input,
.#{$prefix}-form__option--inline .#{$prefix}-form__label {
    display: inline;
    width: auto;
}

// Input & symbol

.#{$prefix}-form__input,
.#{$prefix}-form__symbol {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cwf-form__input--border-color);
    border-radius: 0.25rem;
}

// Symbol

.#{$prefix}-form__symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    color: var(--cwf-form__input--placeholder--color);
}

// Group

.#{$prefix}-form__group {
    display: flex;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

    .#{$prefix}-form__input {
        border-radius: 0;
    }

    & > * {
        margin: 0;
        margin-right: -1px;
        border-radius: 0;
        @include style.z-index("content");

        &:not(.#{$prefix}-form__symbol) {
            flex: 1;
            @include style.z-index("content", "middle");
        }

        &:first-child:not(.#{$prefix}-form__icon),
        &:first-child .#{$prefix}-form__input {
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
        }

        &:last-child:not(.#{$prefix}-form__icon),
        &:last-child .#{$prefix}-form__input {
            margin-right: 0;
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }
    }
}

// Help & validation

.#{$prefix}-form__help {
    color: var(--cwf-form__help--color);
    font-style: italic;
}

.#{$prefix}-form__help,
.#{$prefix}-form__validation {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    padding-top: 0;
}

// Field status

$field--statuses: error, success;

@function field--status--validate($status) {
    @return list.index($field--statuses, $status);
}

@mixin field--status($status) {
    @if field--status--validate($status) {
        .#{$prefix}-form__field--#{ $status } {
            .#{$prefix}-form__icon:before,
            .#{$prefix}-form__validation {
                color: var(--cwf-form--#{$status}-color);
            }

            .#{$prefix}-form__input {
                border-color: var(--cwf-form--#{$status}-color);
            }
        }
    } @else {
        @warn "#{$status} is not a valid form field status. Must be one of the following: #{$field--statuses}.";
    }
}

@include field--status(error);

@include field--status(success);
  • URL: /components/raw/form/_index.scss
  • Filesystem Path: components/form/_index.scss
  • Size: 5.9 KB

Form

The form component defines styles and structural conventions to be used by forms and their necessary child elements (such as labels, inputs, text areas, and help text).

Structure

A form must always be wrapped in an element with the .cwf-form class, usually a <form> HTML element. Each grouping of a label, help text, and input must be wrapped in a .cwf-form__field element; This ensures optimal spacing between each field exists. Labels use the .cwf-form__label class, help text uses the .cwf-form__help class, and inputs, regardless of element type, use the .cwf-form__input class.

Groups

Groups allow the prepending and appending of elements to a form input to provide more context. A group is wrapped by a .cwf-form__group element, and can contain an input flanked by .cwf-form__symbol elements, which can be given FontAwesome icon classes to display an icon instead of text.

Icons

To provide a contextual icon on a form input, wrap it in a .cwf-form__icon element with addition FontAwesome icon classes.

Select boxes

Select boxes can be wrapped in an icon wrapper with a special .cwf-form__icon--select class; This displays a downward chevron icon that rotates when the select box is opened/closed.

Options

Options, such as radio or select buttons, wrap a label/input pair in a .cwf-form__option element. Optionally, a .cwf-form__option--inline modifier may be added to it to ensure the option and label are next to each other horizontally.

Styles

Form styles try to make inputs stand out from the background by giving them a light-gray background instead of the standard white background.

Validation

Visual form validation feedback can be provided by adding a validation modifier to .cwf-form__field element. This will change the color of .cwf-form__validation text, as well as the border and icon color of inputs.

  • .cwf-form__field--error - Changes targeted colors to red to imply an error.
  • .cwf-form__field--success - Changes targeted colors to green to imply success.

Functionality

There is no form-specific functionality provided via javascript.

T4 implementation

The form component is not tied to a specific content type. It is included in the Compass T4 page layout CSS on every page.