Filament•8mo ago

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

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

Solution:

Super ugly, but this works. I put the the extraAttributes on the form itself, and then added this css selector: ```css 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

6 Replies

awcodes•8mo ago

If the parent div doesn’t have a selector you can probably use the :has() css pesudo selector to make it work.

Jon MasonOP•8mo ago

I was able ot add a class to the form

awcodes•8mo ago

Something like Div:has(.checkbox-hint-flex-col)

Jon MasonOP•8mo ago

but the parent of the input that I need to target doesn't have anything I can use to target it. ok i'll try that..

awcodes•8mo ago

Depending on the nesting might need some ‘>’ to specify it more. Just depends on the actual nesting of the divs.

Solution

Jon Mason•8mo ago

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;
}

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;
}

Gaming

Programming

extraAttributes to reformat hint on checkbox?