Bootstrap components

Text fields

The text inputs of a form: text, email, number, password, textarea, read only and file. Always with a visible label, never redrawn by a plugin.

A text field collects typed or chosen text. It is the form-control of the theme: the same height, border and focus ring in every plugin. Moodle draws its forms with it; a plugin that needs a field uses the class and nothing else.

When to use it

Use it

A visible label for every field, linked with for and id.
A form-text line under the field for a hint that is needed before typing.
readonly for a value the user can copy but not change, disabled for a field that is not available now.
The right type (email, number, password, search) so the keyboard and the browser help.

Don't

Use the placeholder as the label: it disappears when typing.
Redraw the border, radius, padding or focus ring in a plugin.
Set a fixed pixel width; use the grid or max-width.
Show an error with colour alone; add the text that says what is wrong (validation).

Anatomy

A field has a label above it, the control (text, with an optional placeholder), an optional hint (form-text) below, and, when something is wrong, a message (see validation). A field never has an icon inside; use an input group for an add-on.

Variants and states

Text field

RestHoverFocusDisabled

text

Textarea

RestHoverFocusDisabled

textarea

Fields of a form

Sizes

Small, default and large

Use the default size. Small belongs in dense places (a filter bar over a table); large only for a single main field on a page, such as a search.

A complete form

How the fields come together: a title with the rule for required fields, a label above each field with its help under it, related fields side by side when they fit (and stacked when they do not), validation messages next to the field they are about, and the actions at the foot of the card, the main one last. A field has a soft inner shadow so it reads as something to type in, takes a tint on hover and a ring on focus.

A form with its validation states

Combinations

Combination	Use it for
Label + field + hint	The label above, the field, then a hint of one line. The hint is written before the error exists; the error replaces it.
Field + input group	A unit, a prefix or a button attached to the field: use the input group instead of drawing the add-on inside the field.
Size × context	Small in filters over a table, default in forms, large for one main field such as a search.
Read only × disabled	`readonly` for a value the user can copy; `disabled` for a field that is not available now (it is not sent).

What Didactika changes and why

What we changed	Why it helps
The border has 3:1 contrast against the page	A field is a target: people with low vision, or a screen in the sun, must see where it begins. Bootstrap’s default border is closer to 2:1.
40 px tall with more room inside	It is the height of a button, so a field and its button line up, and the text does not touch the border.
The focus is the border in the primary colour plus a soft ring	The active field is the one that changed colour, and the ring is the same cue every other control gives.
Labels are semi-bold and the hint is small and muted	The eye reads label, field, hint in that order, and the hint never competes with what the user types.

Classes

Class	What it does
`form-control`	Base of every text field, textarea and file input
`form-control-sm`, `form-control-lg`	Smaller and larger
`form-label`	Label above a field
`form-text`	Hint under a field
`form-control-plaintext`	A read-only value shown as text, aligned with the other fields
`readonly`, `disabled`	Attributes, not classes

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.

Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet.

Accessibility

Every field has a label; if the design has none, give it aria-label.
aria-describedby points to the hint and to the error message.
autocomplete with the right token on personal data.
The focus ring must stay visible; never outline: none.
Contrast of text against the field is 4.5:1, of the border against the page 3:1.