🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%


The 📁 base/_forms.scss file contains the basic forms style, while the 📁 custom-style/_forms.scss file is where you create your custom form elements.

To help you in the process of customizing your form elements, the framework includes some CSS custom properties to set padding and border-radius:

:root {
  --form-control-padding-x: var(--space-sm);
  --form-control-padding-y: var(--space-xs);
  --form-control-radius: 0.25em;

The .form-control class applies the basic style to all form elements. To highlight invalid form inputs, you can target the aria-invalid attribute, while the disabled (or readonly) attribute can be used to target disabled form elements:

Class Description
.form-control basic style of all form elements
.form-control[aria-invalid="true"] highlight form element where value entered is invalid
.form-control[disabled] target disabled form elements
.form-control[readonly] target disabled form elements

Other form classes:

Class Description
.form-legend <legend> element
.form-label <label> element
.form-error-msg error message (hidden by default)
.form-error-msg--is-visible show error messages
.radio-list list of radio inputs
.checkbox-list list of checkbox inputs

Fork the pen below or use the Forms Editor to create your custom form style:

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us