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

Draw the radio group without Tailwind

Browse Source 
<x-radio> renders data-md-radio (data-md-inline), its legend, options,
rows and support as data-md-* attributes, and its layout moves into
components/radio.css: the 16px stack, the inline row from 600px, the
legend and the hint on the type and spacing tokens (plan step 36). A
label-less ring wears md-touch-target; the caller's style now lands on
the fieldset with its class.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 14:41:38 +02:00
co-authored by Claude Opus 5
parent f86afc0542
commit 8747163fce
3 changed files with 88 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/radio.blade.php
+13 -18
View File
@@ -35,28 +35,23 @@
@endphp
<fieldset
{{ $attributes->only(['class', 'wire:key'])->class(['min-w-0']) }}
data-md-radio
@if ($inline) data-md-inline @endif
{{ $attributes->only(['class', 'style', 'wire:key']) }}
@if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
>
@if (filled($label))
<legend class="mb-3 type-label-lg text-on-surface-variant">{{ $label }}</legend>
<legend data-md-radio-legend>{{ $label }}</legend>
@endif
<div @class(['grid gap-4', 'medium:flex medium:flex-wrap medium:gap-x-6' => $inline])>
<div data-md-radio-options>
@foreach ($options as $option)
@php($optionHintText = data_get($option, $optionHint))
<label data-md-selection-row @if ($messages !== []) data-md-invalid @endif @class([
'flex gap-4',
'items-start' => filled($optionHintText),
'items-center' => blank($optionHintText),
])>
<span data-md-radio-button @class([
'mt-0.5' => filled($optionHintText),
'touch-target' => blank(data_get($option, $optionLabel)) && blank($optionHintText),
])>
<label data-md-selection-row @if ($messages !== []) data-md-invalid @endif>
<span data-md-radio-button @if (blank(data_get($option, $optionLabel)) && blank($optionHintText)) class="md-touch-target" @endif>
<input
{{ $attributes->except(['class', 'wire:key', 'name', 'id']) }}
{{ $attributes->except(['class', 'style', 'wire:key', 'name', 'id']) }}
type="radio"
name="{{ $name }}"
value="{{ data_get($option, $optionValue) }}"
@@ -67,10 +62,10 @@
<span data-md-radio-dot></span>
</span>
<span class="min-w-0">
<span class="block type-body-lg text-on-surface" data-md-selection-label>{{ data_get($option, $optionLabel) }}</span>
<span data-md-selection-text>
<span data-md-selection-label>{{ data_get($option, $optionLabel) }}</span>
@if (filled($optionHintText))
<span class="mt-0.5 block type-body-sm text-on-surface-variant">{{ $optionHintText }}</span>
<span data-md-selection-hint>{{ $optionHintText }}</span>
@endif
</span>
</label>
@@ -78,12 +73,12 @@
</div>
@if ($messages !== [])
<div id="{{ $id }}-support" class="mt-2 type-body-sm text-error" role="alert">
<div id="{{ $id }}-support" data-md-selection-support role="alert">
@foreach ($messages as $message)
<p>{{ $message }}</p>
@endforeach
</div>
@elseif (filled($hint))
<p id="{{ $id }}-support" class="mt-2 type-body-sm text-on-surface-variant">{{ $hint }}</p>
<p id="{{ $id }}-support" data-md-selection-support>{{ $hint }}</p>
@endif
</fieldset>