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

Solution

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

Jump to solution

Filament•11mo ago•

4 replies

_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'),

Solution

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

Jump to solution

Checkboxlist - disable click on label

Checkboxlist - disable click on label

Similar Threads

Similar Threads

Similar Threads