Docs
Classes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

StudioForm Combo Class

When integrating StudioForm, utilizing a set of specialized combo classes significantly enhances the management and presentation of form elements.

These classes are designed to improve user experience by providing intuitive visual cues and facilitating smooth interactions throughout the form submission process. Here’s a brief rundown of each class and its purpose:

Hiding Elements Until Ready: sf-hide

This class hides elements on the page until all scripts are loaded, ensuring that content is displayed cleanly and only when fully ready.

Hiding Elements Until Ready: sf-hide
sf-hide
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Marking Completed Steps: sf-completed

Signifies that a step in a progress sequence has been completed, helping to visually distinguish it from incomplete steps.

Marking Completed Steps: sf-completed
sf-completed
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Highlighting the Current Step: sf-current

Indicates the active step in a progress sequence, making it clear to users where they currently are in the form or process.

Highlighting the Current Step: sf-current
sf-current
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Managing Step Transitions: sf-await

Used primarily within buttons, this class manages transitions between steps, holding the state while waiting for callbacks, and enables native Webflow interactions, such as form submissions.

Managing Step Transitions: sf-await
sf-await
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Enhancing Keyboard Navigation: sf-focus

Applied to radio buttons and checkboxes, it enhances the visual response when navigated with keyboard arrows, focusing when there is no visible 'Next' button in the form step.

Enhancing Keyboard Navigation: sf-focus
sf-focus
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Visual Cues for File Dragging: sf-drag-over

Provides a visual indication on file upload areas when a file is dragged over them, showing users exactly where to drop the files for uploading.

Visual Cues for File Dragging: sf-drag-over
sf-drag-over
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Indicating Successful File Attachment: sf-attached

Alters the appearance of file upload elements to indicate that a file has been successfully attached or uploaded.

Indicating Successful File Attachment: sf-attached
sf-attached
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Displaying Check State: sf-checked

Used for radio buttons and checkboxes to display a checked state, offering clear feedback when selections are made.

Displaying Check State: sf-checked
sf-checked
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Highlighting Mandatory Fields: sf-required

Highlights fields that must be filled and can trigger the display of error messages if these fields are left incomplete, ensuring all necessary inputs are provided by the user.

Highlighting Mandatory Fields: sf-required
sf-required
default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
default =
|
values =
Copy
Copied

Class Directory

The Class Directory is a crucial part of our components library, detailing the uses and behaviors of various combo classes. It's designed to help users swiftly pinpoint and implement the right classes for optimizing form functionalities and aesthetics.

sf-required

Manage recurring validation states.
sf-form_input-dark
sf-required
Field Input (Required)
sf-form_checkbox-dark-field
sf-required
Checkbox (Required)
sf-form_radio-dark-field
sf-required
Radio (Required)
sf-form_input-select-dark
sf-required
Select (Required)
sf-form_input-date-dark
is-icon-left-right
sf-required
sf-form-icon-left
sf-required
Date Input (Required)
This is an error tag
sf-form_input-error-dark-wrapper
sf-required
Error Tag (Required)
sf-form-icon-right
sf-required
Icon on Input Right (Required)
sf-form-icon-left
sf-required
Icon on Input Left (Required)
sf-form-icon-right
is-text-area
sf-required
Icon on Input Right Text Area (Required)

sf-checked

Manage recurring checked radio & checkboxes states.
sf-form_checkbox-dark-field
sf-checked
Checkbox (Checked)
sf-form_radio-dark-field
sf-checked
Radio (Checked)

sf-focus

Manage recurring focusing for button, radio and checkbox states.
sf-form_radio-dark-field
sf-focus
Radio (Focused)
sf-form_checkbox-dark-field
sf-focus
Checkbox (Focused)

sf-hide

Manage hidden states.
sf-skeleton-dark
Loader Box (Currently Shown)
This one is for showing purposes.
sf-skeleton-dark
sf-hide
Loader Box (Currently Hidden)

sf-await

Manage awaiting states.
sf-button-child
sf-await
sf-button-await-child
sf-await
Awaiting Status of Buttons

sf-current

Manage current states of progress steps.
1
Consent
sf-form_progress-side-step-number-dark-wrapper
sf-current
sf-form_progress-side-step-text-dark
sf-current
Progress Steps (Current)
Step
sf-form_progress-step-text-dark
sf-current
sf-form_progress-step-line-dark
sf-current
Progress Steps (Current)

sf-completed

Manage completed states of progress steps.
1
Consent
sf-form_progress-side-step-number-dark-wrapper
sf-completed
sf-form_progress-side-step-text-dark
sf-completed
sf-form_progress-side-step-icon-dark
sf-completed
sf-form_progress-side-step-number-dark
sf-completed
Progress Steps (Completed)
Step
sf-form_progress-step-text-dark
sf-completed
sf-form_progress-step-line-dark
sf-completed
sf-form_progress-step-icon-dark-wrapper
sf-completed
Progress Steps (Completed)
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.