noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Count a text field's characters against its maximum

Browse Source 
M3 lists "supporting text + character counter" as a configuration of both
text-field variants; nothing in the package drew one (plan step 24, audit
docs/audits/m3-alignment/inputs.md § Missing). `counter` on `<x-input>` and
`<x-textarea>` now puts `n/max` at the end of the supporting-text row, counted
from the control on every input, in the error colour past the maximum, and said
as M3's own "Character count, 5/20" from a polite region once typing settles.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:21:22 +02:00
co-authored by Claude Fable 5.1
parent 71442831ff
commit c8c2d2e13e
7 changed files with 127 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/field.css
+28 -1
View File
@@ -20,7 +20,9 @@
* error state's second indicator
* .field-outline the fieldset and its legend (the filled field's indicator line)
* .field-label the visible label
* .field-support the hint, or the error in its place
* .field-support-row the row under the field
* .field-support the hint, or the error in its place
* .field-counter M3's character counter, `n/max`, at the end of that row
*
* A select's open list is not part of the field: it is the dropdown menu in components/menu.css.
*/
@@ -450,7 +452,16 @@
}
}
/* The hint or the error, and — when the field has a maximum — M3's character counter at the far
end of the same row (specs: "Padding between supporting text and counter | 16dp", which the
two paddings between them already make). */
.field-support-row {
display: flex;
align-items: baseline;
}
.field-support {
min-width: 0;
padding: 0.25rem var(--field-pad) 0;
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-body-sm);
@@ -461,6 +472,22 @@
color: var(--md-sys-color-error);
}
.field-counter {
flex: none;
margin-inline-start: auto;
padding-block-start: 0.25rem;
padding-inline-end: var(--field-pad);
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-body-sm);
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
font-variant-numeric: tabular-nums;
}
/* Past the maximum the count is an error, and says so in the error colour. */
.field-counter[data-over] {
color: var(--md-sys-color-error);
}
/* ---- The filled text field ---------------------------------------------------------------- */
.field[data-variant="filled"] .field-box {