input + label {color: var(--color-gray-500)} .check-btn > input:checked + label {background-color: var(--color-primary-50); color:var(--color-primary-500); --tw-ring-color: var(--color-primary-400); z-index: 1} .check-btn > input:checked + label > svg {opacity: 1; top: -1px; right: -1px} CSS; } protected function buildPrimary() { list($id, $text, $name, $checked, $disabled, $type, $typeClass, $rootClass, $labelClass, $labelStyle, $value) = $this->prop(array('id', 'text', 'name', 'checked', 'disabled', 'type', 'typeClass', 'rootClass', 'labelClass', 'labelStyle', 'value')); if(empty($typeClass)) $typeClass = $type; if(empty($id)) $id = empty($name) ? $this->gid : ($name . '_' . $value); return div ( setClass("$typeClass-btn check-btn", $rootClass, array('disabled' => $disabled)), h::input ( set::type($type), set::id($id), set::name($name), set::checked($checked), setClass('hidden'), set($this->props->skip('text,primary,typeClass,rootClass,id,labelClass')) ), h::label(set('for', $id), setClass($labelClass, 'btn'), setStyle($labelStyle ? $labelStyle : array()), html($text), html('')), $this->children() ); } }