Form controls
CSS + Twig contract for assessment blocks and Gravity Forms (Turbo remap).
Styles: wp2lms-turbo-blocks/assets/src/styles/base/form-controls.css (imported from skin.css).
Twig: wp2lms-turbo-blocks/components/_shared/form/.
Class contract
Section titled “Class contract”| Class | Role |
|---|---|
.wp2turbo-form |
Form shell / GF scope root |
.wp2turbo-field |
Field wrapper (alias: .skin-field) |
.wp2turbo-label |
Label (alias: .skin-label) |
.wp2turbo-hint |
Hint / error text (alias: .skin-hint) |
.wp2turbo-control |
Text-like input |
.wp2turbo-control--select |
<select> |
.wp2turbo-control--textarea |
<textarea> |
.wp2turbo-control--file |
File input (legacy) |
.wp2turbo-file-drop* |
GF drag-and-drop upload zone |
.wp2turbo-file-list* |
Selected files list (reorder / remove) |
.wp2turbo-likert* |
Survey Likert scale / multi-row table |
.wp2turbo-rating* |
Survey star rating |
.wp2turbo-rank-field |
Survey Rank wrapper; items use .wp2turbo-sort-question__* + SortableJS |
.wp2turbo-control--inline |
Compact cloze control |
.wp2turbo-control.is-invalid / [aria-invalid] |
Error state |
.wp2turbo-choice-list |
Radio/checkbox group |
.wp2turbo-choice |
Choice row |
.wp2turbo-choice--radio / --checkbox / --image |
Variants |
.wp2turbo-choice__input.visually-hidden |
Native input |
.wp2turbo-choice__indicator |
Custom glyph |
.wp2turbo-choice__text |
Option text |
.wp2turbo-choice.is-selected / .is-correct / … |
Assessment states |
.wp2turbo-choice--native |
Dense native accent |
.wp2turbo-form__fields |
12-col field grid |
.wp2turbo-form__field--w-full|half|third|quarter |
Column widths |
.wp2turbo-form-progress__* |
Multipage step chrome (QB-like) |
.wp2turbo-field-group / __row |
Composite fields (name/address) |
.wp2turbo-field-list |
List repeater |
Legacy BEM (.wp2turbo-choice-question__option, __input, …) remains aliased for one–two releases.
Twig partials
Section titled “Twig partials”_shared/form/control-input.twig_shared/form/control-select.twig_shared/form/choice-option.twig_shared/form/field.twig
Alpine bindings: pass via attrs / inputAttrs / labelAttrs raw strings.
Gravity Forms
Section titled “Gravity Forms”See GRAVITY_FORMS.md. Fields render through GravityForm/fields/** onto these classes — not GF theme markup.
Migrated consumers
Section titled “Migrated consumers”- QuestionChoice, SpeedTest →
.wp2turbo-choice* - QuestionOpen →
.wp2turbo-control(+ legacy__inputclass) - QuestionFillBlank →
.wp2turbo-control--inline - QuestionClassify →
.wp2turbo-control--select - Form shell → inherits via
.wp2turbo-form+.skin-*aliases - GravityForm → shared controls + column / step-progress classes