mirror of
https://github.com/twinpath/app.git
synced 2026-01-26 05:15:28 +07:00
70 lines
4.1 KiB
PHP
70 lines
4.1 KiB
PHP
<x-common.component-card title="Checkboxes">
|
|
<div class="flex flex-wrap items-center gap-8">
|
|
<div x-data="{ checkboxToggle: false }">
|
|
<label for="checkboxLabelOne"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
<div class="relative">
|
|
<input type="checkbox" id="checkboxLabelOne" class="sr-only"
|
|
@change="checkboxToggle = !checkboxToggle" />
|
|
<div :class="checkboxToggle ? 'border-brand-500 bg-brand-500' :
|
|
'bg-transparent border-gray-300 dark:border-gray-700'"
|
|
class="f hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]">
|
|
<span :class="checkboxToggle ? '' : 'opacity-0'">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" stroke-width="1.94437"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
Default
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ checkboxToggle: true }">
|
|
<label for="checkboxLabelTwo"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
<div class="relative">
|
|
<input type="checkbox" id="checkboxLabelTwo" class="sr-only"
|
|
@change="checkboxToggle = !checkboxToggle" />
|
|
<div :class="checkboxToggle ? 'border-brand-500 bg-brand-500' :
|
|
'bg-transparent border-gray-300 dark:border-gray-700'"
|
|
class="hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]">
|
|
<span :class="checkboxToggle ? '' : 'opacity-0'">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" stroke-width="1.94437"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
Checked
|
|
</label>
|
|
</div>
|
|
|
|
<div x-data="{ checkboxToggle: true }">
|
|
<label for="checkboxLabelThree"
|
|
class="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700">
|
|
<div class="relative">
|
|
<input type="checkbox" id="checkboxLabelThree" class="peer sr-only"
|
|
@change="checkboxToggle = !checkboxToggle" disabled />
|
|
<div :class="checkboxToggle ? 'bg-transparent border-gray-200 dark:border-gray-800' :
|
|
'border-brand-500 bg-brand-500'"
|
|
class="mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px]">
|
|
<span :class="checkboxToggle ? '' : 'opacity-0'">
|
|
<svg class="stroke-gray-200 dark:stroke-gray-800" width="14" height="14"
|
|
viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="" stroke-width="2.33333"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
Disabled
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</x-common.component-card>
|