Forms

The _forms.scss file contains the basic styling of the form elements.

Setting the basic input style #

The .form-control class is used to define the basic style for all our form components (e.g., text input, textarea, select elements):

.form-control {
    /* basic form element style */
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg);
    border: 2px solid var(--color-contrast-low);
    width: 100%;

    &:focus {
        outline: 3px solid var(--color-primary-a20);
        outline-offset: 0;
        border-color: var(--color-primary);
    }

    &::-webkit-input-placeholder {
        color: var(--color-contrast-medium);
    }

    &::-moz-placeholder {
        opacity: 1;
        color: var(--color-contrast-medium);
    }

    &:-ms-input-placeholder {
        color: var(--color-contrast-medium);
    }

    &:-moz-placeholder {
        color: var(--color-contrast-medium);
    }
}

Padding values are defined according to our spacing system so that they are automatically responsive. For the color variables, refer to our colors page.

States and error messages #

States are used to overwrite some properties of the .form-control class to account for cases like errors and disabled inputs.

For example, to target error states we use the [aria-invalid="true"] selector:

.form-control[aria-invalid="true"] {
    border-color: var(--color-error);

    &:focus {
        outline-color: var(--color-error-a20);
    }
}

Error messages are inline alerts that provide additional info about an error within the form:

Typography elements #

The framework also includes classes to stylize typography elements within forms (e.g., legends and labels):

Radio and checkbox lists #

The .radio-list and .checkbox-list classes can be used to distribute checkboxes and radios, together with their labels, vertically or inline. These classes don't edit the native style of the elements (we have a component for that), but take care of alignment between buttons and labels.

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.