diff --git a/lib/zin/wg/thinkchecklist/css/v1.css b/lib/zin/wg/thinkchecklist/css/v1.css
index 5016bdea75..7f7eeac830 100644
--- a/lib/zin/wg/thinkchecklist/css/v1.css
+++ b/lib/zin/wg/thinkchecklist/css/v1.css
@@ -1,11 +1,9 @@
-.think-check-list .checkbox-primary, .think-check-list .radio-primary {width: 100%; min-height: 3rem; border: 1px solid var(--color-gray-300); color: var(--color-gray-800); padding: 0.75rem 1.625rem 0.75rem 1.5rem; border-radius: var(--radius); font-size: 1rem;}
-.think-check-list .checkbox-primary>label,.think-check-list .radio-primary>label {width: 100%; padding-left: 0;}
-.think-check-list .checkbox-primary>label:after, .think-check-list .checkbox-primary>label:before,
-.think-check-list .radio-primary>label:after, .think-check-list .radio-primary>label:before {right: 0; left: unset;}
-.think-check-list .checkbox-primary.checked, .think-check-list .checkbox-primary>input.checked .think-check-list .checkbox-primary>input[type=checkbox]:checked,
-.think-check-list .radio-primary.checked, .think-check-list .radio-primary>input.checked, .think-check-list .radio-primary>input[type=radio]:checked {color: var(--color-primary-500); border: 1px solid var(--color-primary-500);}
-.think-check-list>.item-input>input[type=text] {background-color: #fff;}
-.think-check-list .checkbox-primary:hover, .think-check-list .radio-primary:hover {box-shadow: 0px 0.25rem 0.5rem 0px rgba(var(--color-primary-500-rgb), .3); border: 1px solid var(--color-primary-500);}
-.think-check-list .radio-primary>label {font-family: ZentaoIcon !important;}
+.think-check-list .item-control.is-checked {border: 1px solid var(--color-primary-500); color: var(--color-primary-500);}
+.think-check-list .item-control:hover {box-shadow: 0px 0.25rem 0.5rem 0px rgba(var(--color-primary-500-rgb), .3); border: 1px solid var(--color-primary-500);}
+.think-check-list .item-control textarea {background-color: #fff;}
+.think-check-list .checkbox-primary {--checkbox-size: 16px;}
+.think-check-list .checkbox-primary>input[type=checkbox]:checked+label:after {left: 1px; --tw-content: "\e5ca"; color: var(--color-primary-500); font-weight: 600;}
+.think-check-list .checkbox-primary.checked>label:before, .think-check-list .checkbox-primary>input[type=checkbox]:checked+label:before {background-color: unset; border-color: var(--color-primary-500); color: var(--color-primary-500);}
+.think-check-list .checkbox-primary.checked>label, .think-check-list .radio-primary>label {font-family: ZentaoIcon !important;}
 .think-check-list .radio-primary>label:before, .think-check-list .radio-primary.checked>label:before, .think-check-list .radio-primary>input[type=radio]:checked+label:before {display: none;}
-.think-check-list .radio-primary>label:after {content: "\e5ca"; color: var(--color-primary-500); background-color: unset; top: 2px; font-weight: 600;}
+.think-check-list .radio-primary>label:after {--tw-content: "\e5ca"; color: var(--color-primary-500); font-size: 16px; background-color: unset; top: -2px; left: 2px; font-weight: 600;}
diff --git a/lib/zin/wg/thinkchecklist/js/v1.js b/lib/zin/wg/thinkchecklist/js/v1.js
index b3ff47c39a..30e2d6e866 100644
--- a/lib/zin/wg/thinkchecklist/js/v1.js
+++ b/lib/zin/wg/thinkchecklist/js/v1.js
@@ -1,21 +1,37 @@
-window.handleInput = function()
+window.stopPropagation = function(event)
 {
-    if($(this).closest('.radio-primary').length)
+    event.stopPropagation();
+}
+
+window.toggleChecked = function()
+{
+    if($(this).data('type') == 'radio')
     {
+        $(this).find('input').prop('checked', !$(this).find('input').prop('checked'));
+        $(this).closest('.think-check-list').find('.item-control').removeClass('is-checked');
+        $(this).toggleClass('is-checked', $(this).find('input').is(':checked'));
         $(this).closest('.think-check-list').find('.radio-primary').removeClass('checked');
-        $(this).closest('.radio-primary').toggleClass('checked');
+        $(this).find('.radio-primary').toggleClass('checked');
     }
     else
     {
-        $(this).closest('.checkbox-primary').toggleClass('checked', $(this).is(':checked'));
+        $(this).find('input').prop('checked', !$(this).find('input').prop('checked'));
+        $(this).find('.checkbox-primary').toggleClass('checked', $(this).find('input').is(':checked'));
+        $(this).toggleClass('is-checked', $(this).find('input').is(':checked'));
     }
 
-    if($(this).closest('.item-input').length)
+    if($(this).hasClass('has-input'))
     {
-        $(this).closest('.item-input').find('input[type="text"]').prop('disabled', !$(this).is(':checked'));
+        $(this).find('textarea').prop('disabled', !$(this).find('input').prop('checked'));
     }
     else
     {
-        $(this).closest('.think-check-list').find('.item-input input[type="text"]').prop('disabled', true);
+        if($(this).data('type') == 'radio') $(this).closest('.think-check-list').find('.has-input textarea').prop('disabled', true);
     }
 }
+
+window.inputOther = function()
+{
+    this.style.height = 'auto';
+    this.style.height = (this.scrollHeight > 96 ? 96 : this.scrollHeight) + 'px';
+}
diff --git a/lib/zin/wg/thinkchecklist/v1.php b/lib/zin/wg/thinkchecklist/v1.php
index 0c542de3f0..a3514c3a1e 100644
--- a/lib/zin/wg/thinkchecklist/v1.php
+++ b/lib/zin/wg/thinkchecklist/v1.php
@@ -2,7 +2,7 @@
 declare(strict_types=1);
 namespace zin;
 
-require_once dirname(__DIR__) . DS . 'input' . DS . 'v1.php';
+require_once dirname(__DIR__) . DS . 'textarea' . DS . 'v1.php';
 require_once dirname(__DIR__) . DS . 'checkbox' . DS . 'v1.php';
 
 class thinkCheckList extends wg
@@ -52,24 +52,55 @@ class thinkCheckList extends wg
         $props = $this->props->pick(['primary', 'type', 'name', 'disabled']);
         if(!empty($props['name']) && !empty($item['value'])) $props['id'] = $props['name'] . $item['value'];
 
-        if(!empty($item['isOther'])) return div
+        $itemClass = $this->prop('type') === 'checkbox' ? 'gap-4 px-4' : 'gap-3 px-3';
+        $text      = $item['text'];
+        unset($item['text']);
+        if(!empty($item['isOther']))
+        {
+            return div
+            (
+                setClass('item-control has-input w-full py-3 flex items-center justify-between border cursor-pointer ' . $itemClass),
+                setData('type', $this->prop('type')),
+                on::click('toggleChecked'),
+                div
+                (
+                    setClass('flex items-start text-lg gap-1.5 flex-1'),
+                    div(setStyle(array('min-width' => '60px')), $text),
+                    new textarea
+                    (
+                        set(array(
+                            'rows'     => 1,
+                            'disabled' => !isset($item['checked']) || !$item['checked'],
+                            'name'     => isset($item['value']) ? $item['value'] : 'other',
+                            'value'    => isset($item['showText']) ? $item['showText'] : ''
+                        )),
+                        on::input('inputOther'),
+                        on::click('stopPropagation')
+                    ),
+                ),
+                new checkbox
+                (
+                    set($props),
+                    set($item),
+                    $this->prop('type') == 'radio' ? on::click('stopPropagation') : null,
+                    isset($item['checked']) && $item['checked'] ? set::rootClass('checked') : null
+                )
+            );
+        }
+        return div
         (
-            setClass('w-full relative cursor-pointer item-input'),
+            setData('type', $this->prop('type')),
+            on::click('toggleChecked'),
+            setClass('item-control w-full py-3 flex items-center justify-between border cursor-pointer ' . $itemClass),
+            div(setClass('text-lg flex-1'), $text),
             new checkbox
             (
                 set($props),
                 set($item),
-                isset($item['checked']) && $item['checked'] ? set::rootClass('checked') : null,
-                on::change('handleInput')
-            ),
-            new input(set(array(
-                'disabled' => !isset($item['checked']) || !$item['checked'],
-                'name'     => $item['value'],
-                'class'    => 'absolute top-2',
-                'style'    => array('width' => '80%', 'height' => '32px', 'right' => '45px')
-            ))),
+                $this->prop('type') == 'radio' ? on::click('stopPropagation') : null,
+                isset($item['checked']) && $item['checked'] ? set::rootClass('checked') : null
+            )
         );
-        return new checkbox(set($props), set($item), isset($item['checked']) && $item['checked'] ? set::rootClass('checked') : null, on::change('handleInput'));
     }
 
     protected function build()