# Form fields Text fields, selects and text areas with Bootstrap 5's names: a label floating in the field or above it, a hint, an error said in words, an icon inside the field. ## Examples `form-floating` keeps the label inside the field and lifts it when the field has a value or the focus. The label follows the control, and the control needs a `placeholder` - it is how CSS knows the field is empty. ```html
``` ### A label above, a hint, an error `form-field` stacks a field's parts: `form-label`, the control, `form-text` for a hint and `invalid-feedback` for an error. The control points at both with `aria-describedby`; an error sets `aria-invalid="true"`, and the browser's own `:user-invalid` draws the same after the person has edited the field. ```html
Full address /excursions/north-bay/. The old one answers with a 301 redirect.
Lower than the child price
``` ### A longer hint A `details` with `form-more` folds what a short hint cannot say. Its chevron turns as it opens. ```html
Older records are removed at night.
More
The count starts from the day a record is written. A record a person marked to keep stays, whatever this number says, until the mark is taken off.
``` ### An icon in the field `form-adorn` puts an icon inside a field or a select, at its start; the field keeps its own name. With `form-floating` on the same element the label starts after the icon, inside the one border - the way a sign-in form draws its fields. ```html
``` ### Sizes `form-control-sm` and `form-select-sm` are 28 px high, the default 32 px, `-lg` 40 px - the same heights as the buttons beside them. ```html ``` ### A one-time code `form-control-otp` spaces the digits of a code from an app or a message in one field. One field takes a paste and the code the system offers above the keyboard - a box per digit takes neither - and the form goes by its button, never by the last digit. ```html
Spaces and dashes are fine.
``` ### A new password A button with `command="--reveal"` for a password field shows its text and hides it again - `aria-pressed` says which - and the field hides it on its form's submit and when the page comes back from the history. Each element with `data-strength` naming the field shows its level as it is typed: shorter than its `minlength`, long enough, then longer or of three kinds of characters, then both - a `meter` at once, and the words, the page's texts `strength.short`, `.fair`, `.good` and `.strong`, once the typing pauses, said politely by a live region of the field's own - VoiceOver says nothing of a password field's own description changing, so the words' element needs no `aria-live`. The level is a hint: the server keeps its own rules. ```html
At least 12 characters. A phrase of a few words is easy to remember.
``` ### A range `form-range` on an `` is the browser's own slider in the theme's accent: it keeps its keys (the arrows, `Home`, `End`, `Page Up` and `Page Down`) and its look in forced colors. The label says what it sets; when the number matters, write it beside the slider. ```html
``` ### A button beside a floating field `btn-float` makes a button as tall as a floating field, for the one action beside it; with `btn-icon` it is square. ```html
``` ### A text that grows `data-grow` on a `textarea` starts it at its `rows` - `rows="1"` is one line - and grows it with its text, without the five lines a text area takes otherwise. Where the browser has `field-sizing: content` - Chrome 123, Firefox 152, Safari 26.2 - CSS does it; below, the library sizes it from its text as it is typed, reset and loaded. A `max-h-*` caps it, and past the cap it scrolls. ```html
``` ### A count of characters `form-counter` with `data-counter` naming a field shows how much is typed against its `maxlength`, or against the counter's `data-counter-max`, which lets the text go over - a title the search results cut. From nine tenths it turns to the warning tone, past the most to danger (`data-state` `near` and `over`), and once the typing pauses near or over, the count is said politely in the page's text `counter`. Joined to the field by `aria-describedby`, the count is read with it. ```html
``` ### Number steps Buttons with `command="--step-up"` or `"--step-down"` and `aria-controls` naming a number field step it by its `step` within its `min` and `max`, and fire `input` and `change` as typing does; at an end a button is `aria-disabled`. The arrow keys in the field step it already: the buttons are for a pointer. ```html
``` ### A colour `form-control-color` is the browser's own colour picker in a field's box. A text field with `data-color-for` naming the picker is its hex twin: each follows the other, and a twin that holds no colour - `#rgb` or `#rrggbb`, the `#` optional - is `aria-invalid`. A stored colour is drawn by `data-color`, which the library sets as `--redz-color` through the CSSOM, so a page under a strict CSP writes no style: on a `dot`, an `icon-tile` - its icon black or white by the colour's lightness -, a `choice-media`, and the edges `edge-top-color` and `edge-start-color`. ```html
Overdue
``` ### Sent on a change `data-submit="change"` on a form or on one of its controls sends the form when such a control changes - a filter's select, a sort, a switch - by `requestSubmit`, so the browser's checks and the page's submit listeners run. A text field changes when it is left, not at every key; a combobox's list when a value is chosen. ```html
``` ### Shown by another field `data-show-when` on a region names a field of its form, and `data-show-in` the values that show it, a space between them; without it, any value does. A checkbox or a radio counts its value when checked. A hidden field beside a checkbox of the same name is what the form sends while it is off: `data-show-in` can name its value, and a region without `data-show-in` does not count it. While the region is hidden its fields are disabled, so the form sends none of them; a field the page disabled itself stays disabled. A region inside a hidden region counts as hidden, whatever its own field holds. ```html
A message goes out the evening before.
The guest is told nothing.
``` ## States ## Keyboard and accessibility - Every control has a visible label: a `