07. Components: forms.css

Forms should stay predictable. Keep label, control, help text, and errors in the same order every time.

Use forms for

  • Use forms for Django forms, admin forms, filters, search rows, auth screens, and basic field display.
  • All interactive inputs should use .la-input, .la-select, or .la-textarea. Do not use raw unstyled controls.

Form layout

.la-form is a grid stack for field rows. Wrap related fields in a .la-fieldset. Use .la-field-grid for side by side fields on wider forms. .la-form-sm and .la-form-md limit width.

.la-form .la-fieldset .la-field-row

Profile details

Short help text belongs under the field.

.la-field-grid : two columns

Contact info

Department: Student Affairs

Field states

Apply state classes to the .la-field-row wrapper, not the input. The input border and help text color update together. Use success and warning states only when the feedback is useful.

This field has a validation error.

Input is allowed but needs attention.

Use only when confirmation is useful.

Password and checkboxes

.la-password-wrap places the toggle button inside the input. .la-check-label wraps a checkbox or radio with its label inline. Use .la-option-stack for vertically stacked option lists.

.la-password-wrap .la-password-toggle

.la-check-label : inline

.la-option-stack : stacked group

Auth form

.la-auth-card centers the form and constrains width. .la-auth-form styles Django's raw auth markup. .errorlist is unprefixed because Django outputs it directly.

.la-auth-card .la-auth-form .errorlist

Sign in to your account to continue.

  • Django-style validation error.

  • Password helper list item
  • Another helper
or

No account? Register

Filter form

Inline filter row for tables and lists. Uses raw <select> and <input> elements: .la-filter-form styles them to match the control height without requiring .la-select wrappers.

.la-filter-form