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/views/components/field.blade.php
+51 -7
View File
@@ -14,6 +14,13 @@
at the end of the row so the state has two indicators and not only a colour — unless the caller
trails the field with something of its own, or the field is `xs` and has no room.
`counter` is the maximum number of characters, and puts M3's character counter at the end of the
supporting-text row: `n/max`, counted from the control on every `input`, in the error colour once
the value is past the maximum
(docs/reference/m3/components-navigation-selection-inputs.md § Text Fields). It is said as
"Character count, 5/20", M3's own label, from a polite region a second after typing stops rather
than on every keystroke, which would talk over the typing.
`class` from the call site lands on the outermost element, never the control, so a margin or
a width is safe here. --}}
@@ -30,6 +37,7 @@
'variant' => null,
'floated' => false,
'mono' => false,
'counter' => null,
])
@php
@@ -40,6 +48,7 @@
// M3 pairs the error colours with a trailing error icon so the state has two indicators. It
// gives way to whatever the caller trails the field with, and to `xs`, which has no room.
$errorIcon = $messages !== [] && ! isset($trailing) && $density !== 'xs';
$counter = filled($counter) && (int) $counter > 0 ? (int) $counter : null;
@endphp
<div
@@ -80,13 +89,48 @@
@endif
</div>
@if ($messages !== [])
<div id="{{ $id }}-support" class="field-support" role="alert">
@foreach ($messages as $message)
<p>{{ $message }}</p>
@endforeach
@if ($messages !== [] || filled($hint) || $counter !== null)
<div class="field-support-row">
@if ($messages !== [])
<div id="{{ $id }}-support" class="field-support" role="alert">
@foreach ($messages as $message)
<p>{{ $message }}</p>
@endforeach
</div>
@elseif (filled($hint))
<p id="{{ $id }}-support" @class(array_filter(['field-support', $hintClass]))>{{ $hint }}</p>
@endif
@if ($counter !== null)
<span
class="field-counter"
data-field-counter
x-data="{
used: 0,
max: {{ $counter }},
spoken: '',
settle: null,
init() {
const control = this.$el.closest('.field').querySelector('.field-control');
this.used = control.value.length;
control.addEventListener('input', () => (this.used = control.value.length));
this.$watch('used', () => {
clearTimeout(this.settle);
this.settle = setTimeout(() => (this.spoken = @js(__('Character count, :used/:max')).replace(':used', this.used).replace(':max', this.max)), 1000);
});
},
destroy() {
clearTimeout(this.settle);
},
}"
x-bind:data-over="used > max"
>
<span aria-hidden="true" x-text="`${used}/${max}`">0/{{ $counter }}</span>
<span class="sr-only" aria-live="polite" aria-atomic="true" x-text="spoken"></span>
</span>
@endif
</div>
@elseif (filled($hint))
<p id="{{ $id }}-support" @class(array_filter(['field-support', $hintClass]))>{{ $hint }}</p>
@endif
</div>
resources/views/components/input.blade.php
+6 -2
View File
@@ -4,7 +4,8 @@
value, such as a currency or a unit), `variant`, `size` for unlabelled controls in toolbars,
and `mono` for a field that holds code. `clearable` adds a trailing button that empties the
field once it holds something; `copyable` one that copies its value and says so in a snackbar
(a share link, a token). Every other attribute reaches the `<input>`: `type`, `min`, `step`,
(a share link, a token). `counter` counts the characters used against `maxlength`, at the end of
the supporting-text row. Every other attribute reaches the `<input>`: `type`, `min`, `step`,
`readonly`, `wire:model` and the rest. Errors are read from the bag under the `wire:model` name.
The placeholder is a single space when none is given, because the label can only tell an
@@ -21,6 +22,7 @@
'suffix' => null,
'clearable' => false,
'copyable' => false,
'counter' => false,
'size' => 'md',
'variant' => null,
'mono' => false,
@@ -33,9 +35,11 @@
// A plain form's field is named, not bound: its errors are under its name (`files[]` → `files`, `a[b]` → `a.b`).
$errorKey = $model ?? (filled($attributes->get('name')) ? str_replace(['[]', '[', ']'], ['', '.', ''], (string) $attributes->get('name')) : null);
$messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
// M3's counter needs a maximum to count against: without `maxlength` there is nothing to show.
$max = $counter ? $attributes->get('maxlength') : null;
@endphp
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$prefix :$suffix :$size :$variant :$mono :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$prefix :$suffix :$size :$variant :$mono :counter="$max" :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
<input
{{ $attributes->except(['class', 'id', 'placeholder'])->merge(['type' => 'text']) }}
id="{{ $id }}"
resources/views/components/textarea.blade.php
+6 -2
View File
@@ -3,7 +3,8 @@
It starts at `rows` lines (3) and grows with what is typed up to `max-rows`, then scrolls;
`:autogrow="false"` keeps it at `rows` and lets it be resized by hand, vertically only, so a
form's column never moves. The label rests on the first line rather than in the middle of the
box. `label`, `hint`, `variant`; every other attribute reaches the `<textarea>`. --}}
box. `label`, `hint`, `variant`, and `counter` for M3's character counter against `maxlength`;
every other attribute reaches the `<textarea>`. --}}
@props([
'label' => null,
@@ -13,6 +14,7 @@
'rows' => 3,
'maxRows' => null,
'autogrow' => true,
'counter' => false,
])
@php
@@ -22,9 +24,11 @@
// A plain form's field is named, not bound: its errors are under its name (`files[]` → `files`, `a[b]` → `a.b`).
$errorKey = $model ?? (filled($attributes->get('name')) ? str_replace(['[]', '[', ']'], ['', '.', ''], (string) $attributes->get('name')) : null);
$messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
// M3's counter needs a maximum to count against: without `maxlength` there is nothing to show.
$max = $counter ? $attributes->get('maxlength') : null;
@endphp
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$variant :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$variant :counter="$max" :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
<textarea
{{ $attributes->except(['class', 'id', 'placeholder']) }}
id="{{ $id }}"