Give an unlabelled checkbox, radio or switch a 48px target
A selection control with a label is pressed anywhere along its row, but one without — a table's "select all", a row's tick — was only its 18, 20 or 32px box, because the 40px state layer is a ::before that catches no pointer. The box now wears the shared touch-target utility, which M3 asks for on all three (checkbox, radio and switch specs: target size 48dp). Plan step 13, finding IN-03. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Fable 5.1
parent
35548dc13b
commit
da4952e684
@@ -6,7 +6,10 @@
|
||||
partly ticked: HTML has no attribute for it, so the input is marked `data-indeterminate` and
|
||||
resources/js/field.js keeps the property in step, on load and after every morph. Errors are
|
||||
read from the bag under the `wire:model` name. Every other attribute reaches the `<input>`
|
||||
(resources/css/components/selection.css). --}}
|
||||
(resources/css/components/selection.css).
|
||||
|
||||
Without a label — a "select all" in a table header, a row's tick — the row is only the 18px box,
|
||||
so the box carries `touch-target` and catches presses over M3's 48px minimum. --}}
|
||||
|
||||
@props([
|
||||
'label' => null,
|
||||
@@ -30,7 +33,10 @@
|
||||
'items-center' => blank($hint),
|
||||
'flex-row-reverse justify-between' => $right,
|
||||
])>
|
||||
<span data-checkbox @class(['mt-[3px]' => filled($hint)])>
|
||||
<span data-checkbox @class([
|
||||
'mt-[3px]' => filled($hint),
|
||||
'touch-target' => blank($label) && blank($hint),
|
||||
])>
|
||||
<input
|
||||
{{ $attributes->except(['class', 'id', 'wire:key']) }}
|
||||
id="{{ $id }}"
|
||||
|
||||
Reference in New Issue
Block a user