Forms

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

Guide content:

  1. 📝How to set the style of the form elements using the Framework
  2. 🚀How to use the Forms Editor

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.

The Forms Editor #

The Forms Editor is a web design tool that allows you to design and export form elements for your web project. The code generated is compatible with the CodyHouse framework.

✅ When you save your changes, all the forms inside the components are updated with the style you set in the Editor.