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

flex-col items-start

classes to the parent div, not the input itself. Using

extraAttributes

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

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

Jump to solution

Filament•2y ago•

10 replies

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

flex-col items-start

classes to the parent div, not the input itself. Using

extraAttributes

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

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

Jump to solution

extraAttributes to reformat hint on checkbox?

extraAttributes to reformat hint on checkbox?

Similar Threads

Similar Threads

Similar Threads