Input Group
form 要素を任意に組み合わせて横並びに joined する generic wrapper。select+input、input+button、input+input 等。x-input の prefix/suffix/append は単一 input 中心の組み合わせ用、こちらは複数の同格 form 要素用。`$c['addon']` helper class でテキスト装飾 span も addon 高さに揃えられる。
同格 input 2 つ
コピー
コピーしました
<x-input-group label="Full name">
<x-input name="first" placeholder="First" />
<x-input name="last" placeholder="Last" />
</x-input-group>
<div class="w-full">
<label class="block mb-1.5 text-[length:var(--text-field-sm)] font-medium text-base-content">Full name</label>
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="first_6a7e9b50d8630" name="first" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="First">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="last_6a7e9b50d8699" name="last" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="Last">
</div>
</div>
</div>
</div>
</div>
addon class でテキスト装飾を渡す
コピー
コピーしました
<x-input-group label="Website">
<span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">https://</span>
<x-input name="url" placeholder="example.com" />
</x-input-group>
<x-input-group label="Amount">
<span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">$</span>
<x-input type="number" name="amount" value="0" />
<span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">.00</span>
</x-input-group>
<x-input-group label="Email">
<x-input name="local" placeholder="user" />
<span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">@</span>
<x-input name="domain" placeholder="example.com" />
</x-input-group>
<div class="w-full">
<label class="block mb-1.5 text-[length:var(--text-field-sm)] font-medium text-base-content">Website</label>
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">https://</span>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="url_6a7e9b50e43c1" name="url" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="example.com">
</div>
</div>
</div>
</div>
</div>
<div class="w-full">
<label class="block mb-1.5 text-[length:var(--text-field-sm)] font-medium text-base-content">Amount</label>
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">$</span>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="number" id="amount_6a7e9b50e4467" name="amount" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" value="0">
</div>
</div>
</div><span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">.00</span>
</div>
</div>
<div class="w-full">
<label class="block mb-1.5 text-[length:var(--text-field-sm)] font-medium text-base-content">Email</label>
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="local_6a7e9b50e44fa" name="local" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="user">
</div>
</div>
</div><span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">@</span>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="domain_6a7e9b50e4556" name="domain" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="example.com">
</div>
</div>
</div>
</div>
</div>
select + input — country code + phone
コピー
コピーしました
<x-input-group label="Phone">
<x-select name="country">
<option value="+81">JP +81</option>
<option value="+1">US +1</option>
<option value="+44">UK +44</option>
</x-select>
<x-input type="tel" name="phone" placeholder="90-1234-5678" />
</x-input-group>
<div class="w-full">
<label class="block mb-1.5 text-[length:var(--text-field-sm)] font-medium text-base-content">Phone</label>
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="relative w-full" x-data="{ open: false, multi: false, placeholder: '選択', values: [], options: [], init() { const sel = this.$refs.native; this.options = Array.from(sel.options) .filter(o => !o.hidden) .map(o => ({ value: o.value, label: o.text, disabled: o.disabled })); // Defer reading selectedOptions until after Alpine finishes applying // this tree's other bindings (notably wire:model/x-model on the native // <select> itself). Without this, init() runs before the child select's // own binding corrects its value, so the cached `values` — and the // trigger label bound to it — get stuck on the pre-bind SSR state // (placeholder or first <option>) even though the native select and // the Livewire property end up correct. this.$nextTick(() => { this.values = Array.from(sel.selectedOptions).map(o => o.value).filter(v => v !== ''); }); }, toggle(value, isDisabled) { if (isDisabled) return; if (this.multi) { const i = this.values.indexOf(value); if (i >= 0) this.values.splice(i, 1); else this.values.push(value); } else { this.values = [value]; this.open = false; } this.sync(); }, remove(value) { this.values = this.values.filter(v => v !== value); this.sync(); }, sync() { const sel = this.$refs.native; Array.from(sel.options).forEach(o => o.selected = this.values.includes(o.value)); sel.dispatchEvent(new Event('change', { bubbles: true })); }, isSelected(v) { return this.values.includes(v); }, optionFor(v) { return this.options.find(o => o.value === v); }, }" @keydown.escape.window="open = false" @click.outside="open = false">
<select x-ref="native" id="country_6a7e9b510fb88" class="sr-only" tabindex="-1" aria-hidden="true" name="country">
<option value="+81">
JP +81
</option>
<option value="+1">
US +1
</option>
<option value="+44">
UK +44
</option>
</select>
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"></span></button>
<template x-if="!multi">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="flex-1 min-w-0 flex items-center flex-wrap gap-1"><span :class="values.length ? 'truncate text-[length:var(--text-field-md)] text-base-content' : 'truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40'" x-text="values.length ? optionFor(values[0])?.label : placeholder"></span></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi && values.length === 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="truncate text-[length:var(--text-field-md)] text-base-content text-base-content/40" x-text="placeholder"></span></button>
</template><button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-if="multi && values.length > 0">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"></button>
<template x-for="v in values" :key="v">
<button type="button" class="relative w-full flex items-center gap-2 text-left transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)] px-[var(--px-input-md)] py-1 cursor-pointer" @click="open = !open" :aria-expanded="open"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[length:var(--text-field-xs)] bg-base-200 text-base-content border-base-300"><span x-text="optionFor(v)?.label"></span>
<button type="button" class="shrink-0 inline-flex text-current/60 hover:text-current cursor-pointer" @click.stop="remove(v)" aria-label="Remove"><svg class="size-3" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></button></span></button>
</template>
</template><svg class="pointer-events-none shrink-0 size-4 text-base-content/40 transition-transform" :class="open ? 'rotate-180' : ''" viewbox="0 0 20 20" fill="currentcolor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"></path></svg>
<ul x-show="open" x-cloak="" x-transition.opacity.duration.100ms="" class="absolute z-40 mt-1 w-full max-h-72 overflow-auto bg-base-100 tune-border border-base-300 rounded-[var(--radius-field)] shadow-[var(--shadow-box)] p-1" role="listbox" :aria-multiselectable="multi">
<template x-for="opt in options" :key="opt.value">
</template>
<li class="flex items-center justify-between gap-2 px-3 py-2 rounded-[var(--radius-field)] cursor-pointer text-base-content hover:bg-base-200 transition-colors text-[length:var(--text-field-md)]" :class="(isSelected(opt.value) ? 'bg-base-200 font-medium ' : '') + (opt.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '')" role="option" :aria-selected="isSelected(opt.value)" @click="toggle(opt.value, opt.disabled)">
<span x-text="opt.label"></span>
<svg x-show="isSelected(opt.value)" class="shrink-0 size-4 text-base-content" viewbox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="tel" id="phone_6a7e9b510fc12" name="phone" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="90-1234-5678">
</div>
</div>
</div>
</div>
</div>
input + submit button — search bar
コピー
コピーしました
<x-input-group>
<x-input type="search" name="q" placeholder="Search…" />
<x-button type="submit" appearance="solid" color="primary">Go</x-button>
</x-input-group>
<div class="w-full">
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="search" id="q_6a7e9b512d67b" name="q" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="Search…">
</div>
</div>
</div><button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer" type="submit">Go</button>
</div>
</div>
size — xs / sm / md / lg — wrapper と child の両方に size を揃える
コピー
コピーしました
<x-input-group size="xs">
<x-input size="xs" placeholder="size xs" />
<x-button size="xs" appearance="outline" color="neutral">Go</x-button>
</x-input-group>
<x-input-group size="sm">
<x-input size="sm" placeholder="size sm" />
<x-button size="sm" appearance="outline" color="neutral">Go</x-button>
</x-input-group>
<x-input-group size="md">
<x-input size="md" placeholder="size md (default)" />
<x-button size="md" appearance="outline" color="neutral">Go</x-button>
</x-input-group>
<x-input-group size="lg">
<x-input size="lg" placeholder="size lg" />
<x-button size="lg" appearance="outline" color="neutral">Go</x-button>
</x-input-group>
<div class="w-full">
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b5137ea9" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="size xs">
</div>
</div>
</div><button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-xs)] px-[var(--px-field-xs)] text-[length:var(--text-field-xs)] gap-1 bg-transparent text-base-content border-base-content/10 hover:bg-base-content hover:text-base-100 focus-visible:ring-base-content cursor-pointer">Go</button>
</div>
</div>
<div class="w-full">
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-sm)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b5137fc2" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-sm)] px-[var(--px-input-sm)]" placeholder="size sm">
</div>
</div>
</div><button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-transparent text-base-content border-base-content/10 hover:bg-base-content hover:text-base-100 focus-visible:ring-base-content cursor-pointer">Go</button>
</div>
</div>
<div class="w-full">
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b51380b1" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="size md (default)">
</div>
</div>
</div><button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-transparent text-base-content border-base-content/10 hover:bg-base-content hover:text-base-100 focus-visible:ring-base-content cursor-pointer">Go</button>
</div>
</div>
<div class="w-full">
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-lg)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b5138182" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-lg)] px-[var(--px-input-lg)]" placeholder="size lg">
</div>
</div>
</div><button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 bg-transparent text-base-content border-base-content/10 hover:bg-base-content hover:text-base-100 focus-visible:ring-base-content cursor-pointer">Go</button>
</div>
</div>
error — label/hint が text-error
コピー
コピーしました
Domain not recognised
<x-input-group label="Email" error="Domain not recognised">
<x-input name="local" placeholder="user" />
<span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">@</span>
<x-input name="domain" placeholder="example.com" />
</x-input-group>
<div class="w-full">
<label class="block mb-1.5 text-[length:var(--text-field-sm)] font-medium text-error">Email</label>
<div class="inline-flex w-full [&>input]:flex-1 [&>input]:min-w-0 [&>select]:flex-1 [&>select]:min-w-0 [&>textarea]:flex-1 [&>textarea]:min-w-0 [&>div]:flex-1 [&>div]:min-w-0 [&>*]:rounded-none [&>div>div]:rounded-none [&>div>div>button]:rounded-none [&>*:first-child]:rounded-l-[var(--radius-field)] [&>*:last-child]:rounded-r-[var(--radius-field)] [&>div:first-child>div:has(input,select,textarea)]:rounded-l-[var(--radius-field)] [&>div:last-child>div:has(input,select,textarea)]:rounded-r-[var(--radius-field)] [&>div:first-child>div>button]:rounded-l-[var(--radius-field)] [&>div:last-child>div>button]:rounded-r-[var(--radius-field)] [&>*:not(:last-child)]:border-r-0 [&>div:not(:last-child)>div:has(input,select,textarea)]:border-r-0 [&>div:not(:last-child)>div>button]:border-r-0 [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&_*:focus-within]:[--tw-ring-shadow:0_0_transparent] [&>div:not(:last-child):focus-within>div:has(input,select,textarea)]:[box-shadow:1px_0_0_0_var(--color-primary)] [&>div:not(:last-child):focus-within>div>button]:[box-shadow:1px_0_0_0_var(--color-primary)]">
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="local_6a7e9b515d324" name="local" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="user">
</div>
</div>
</div><span class="shrink-0 inline-flex items-center bg-base-200 tune-border border-base-300 text-base-content/70 whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">@</span>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="domain_6a7e9b515d394" name="domain" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="example.com">
</div>
</div>
</div>
</div>
<p class="mt-1.5 text-[length:var(--text-field-sm)] text-error">
Domain not recognised
</p>
</div>