F
Filament•5d ago
_andypeacock

Checkboxlist - disable click on label

Hi all, I've got the following checkboxlist: 
 CheckboxList::make('checklists')
      ->relationship(
          titleAttribute: 'name',
      )
      ->label('Checklists')
      ->maxWidth('2xl')
      ->visible(fn () => $checklists->count() > 0)
      ->bulkToggleable()
      ->gridDirection('row'),
 CheckboxList::make('checklists')
      ->relationship(
          titleAttribute: 'name',
      )
      ->label('Checklists')
      ->maxWidth('2xl')
      ->visible(fn () => $checklists->count() > 0)
      ->bulkToggleable()
      ->gridDirection('row'),
But I want to disable the clickable area on the label (and the rest of the row) - in the attached image, the entire red area is clickable, and I want to put additional content in there that I don't want to toggle the checkbox if the user accidentally clicks it. I've read the checkboxlist API docs, and the source code, and can't figure out how to disable the click outside the checkbox
No description
Solution:
try ```css .fi-fo-checkbox-list-option-label { @apply pointer-events-none;...
Themes - Panels - Filament
Jump to solution
2 Replies
Solution
LeandroFerreira
LeandroFerreira•5d ago
try 
.fi-fo-checkbox-list-option-label {
    @apply pointer-events-none;
}

.fi-checkbox-input {
    @apply pointer-events-auto;
}
.fi-fo-checkbox-list-option-label {
    @apply pointer-events-none;
}

.fi-checkbox-input {
    @apply pointer-events-auto;
}
don't forget to create a custom theme
Themes - Panels - Filament
_andypeacock
_andypeacockOP•5d ago
Ah, fantastic, that stops the click event. Thanks @Leandro Ferreira

Did you find this page helpful?