Bootstrap components

Floating labels5.3+

A field whose label sits inside it and moves up when the user types. Only for compact forms.

A floating label saves vertical space: the label is the placeholder until the field has a value, and then it shrinks above it. Prefer a normal label in Moodle forms; use this one for short, stand-alone forms such as a sign-in or a quick filter.

When to use it

Use it

Short labels that fit inside the field.
The same id and for link as any label.
A placeholder (even a space) in the field: the effect depends on it.

Don't

Use it in long forms or next to fields with a normal label.
Use long labels; they are cut.
Use it with a field that has an add-on in an input group.

Anatomy

A floating field has the control and the label after it, both inside form-floating. The label is drawn over the control and moves when the control has focus or a value.

Variants and states

Text, textarea and select

Full name

About

Role

Combinations

Combination	Use it for
Floating × short form	A sign-in, a quick filter, a short form with 1 to 4 fields.
Floating × select	The select needs `w-100` so it fills the box; the label is always raised.
Floating × validation	`is-invalid` and its message work as on any field.

What Didactika changes and why

What we changed	Why it helps
The label keeps the size and colour of a placeholder until it rises	The form is compact, but the label is never lost: it shrinks above the value instead of disappearing.
Same side padding as the other fields	A floating field and a normal one line up when they share a page.

Classes

Class	What it does
`form-floating`	Wraps the control and its label (the label comes after the control)

In this version

Bootstrap 5.3 draws the focus as a soft ring and keeps every colour in CSS variables (--bs-*), so a theme recolours a control with one variable.

Accessibility

The label stays linked with for: a screen reader reads it as usual.
Contrast of the shrunken label is the same 4.5:1.
The placeholder is not the label.