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__msg-error error message (hidden by default)
.form__msg-error--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: