FilamentF
Filament•2y ago
Jon Mason

extraAttributes to reformat hint on checkbox?

I want a checkbox hint to be underneath the checkbox, like in the screenshot. In order to do that, I need to add flex-col items-start classes to the parent div, not the input itself. Using extraAttributes seems like it only adds the class to the input itself. Does anyone know how I might accomplish this?

.checkbox-hint-flex-col {
    @apply flex flex-col items-start;
}


  Checkbox::make('is_recurring')
                ->label('Recurring')
                ->hint('Check if this is a recurring statement.')
                ->extraAttributes(['class' => 'checkbox-hint-flex-col'])
                ->default(fn () => $this->statement->is_recurring),
image.png
image.png
Solution
Super ugly, but this works. I put the the extraAttributes on the form itself, and then added this css selector:

div.checkbox-hint-flex-col>div:nth-child(4)>div.fi-fo-field-wrp>div.grid>div:first-child {
    @apply flex flex-col items-start;
}
Jump to solution
Was this page helpful?