Forms - v3

• Form Control Component
• Fixed Size Inputs
• Custom Radio/Checkbox Buttons
• Custom Select
• Form Editor
• Form Validator

Edit the custom-style/_forms.scss file to create your custom form elements.

Form Control Component #

The .form-control class applies the basic style to all form elements.

You can also use one of the following class modifiers:

Other form classes:

To see the basic form elements in action, check the Form Example component.

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

Fixed Size Inputs #

By default, the form-control size depends on the padding and font-size. To create fixed-sized input variations (e.g., a .form-control element with a height equal to 40px), you can create class modifiers (e.g., in your custom-style/_util.scss file):

/* 👇 example: custom height utility classes */
.height-30, .height-40, .height-50 {
  height: var(--height);

  &.btn, &.form-control:not(textarea) {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;
  }
}

.height-30 { --height: 30px; }
.height-40 { --height: 40px; }
.height-50 { --height: 50px; }

/* 👇 example: custom width utility classes */
.width-40, .width-120 {
  width: var(--width);

  &.btn {
    padding-left: 0;
    padding-right: 0;
  }
}

.width-40  { --width: 40px; }
.width-120 { --width: 120px; }

Here's a live example:

Custom Radio/Checkbox Buttons #

To replace the native radio/checkbox buttons with custom ones, import the Radio Checkbox Buttons component.

Custom Select #

To replace the native select element with a custom one, import the Custom Select component.

Form Editor #

The Form Editor allows you to design and export form elements. The generated code should be pasted into CodyFrame custom-style/_forms.scss file.

Form Validator #

To validate fields in a form, check our Form Validator (Pro) component.