Перейти к содержимому

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 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.

  • _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.

See GRAVITY_FORMS.md. Fields render through GravityForm/fields/** onto these classes — not GF theme markup.

  • QuestionChoice, SpeedTest → .wp2turbo-choice*
  • QuestionOpen → .wp2turbo-control (+ legacy __input class)
  • QuestionFillBlank → .wp2turbo-control--inline
  • QuestionClassify → .wp2turbo-control--select
  • Form shell → inherits via .wp2turbo-form + .skin-* aliases
  • GravityForm → shared controls + column / step-progress classes