Field variant="inline" not working

[marcheffels]

Hi there! 👋

Using field tag with variant 'inline' looks like normal field tag with default variant.
However, I think that the label and input field should be in one line and no longer one below the other.

<flux:field variant="inline">
    <flux:label>Variant: inline</flux:label>
    <flux:input wire:model="name" type="text"/>
    <flux:error name="name" />
</flux:field>

<flux:field>
    <flux:label>Without Variant (default)</flux:label>
    <flux:input wire:model="name" type="text"/>
    <flux:error name="name" />
</flux:field>

Thanks!

[MiguelLaforest]

 ->add(match ($variant) {
    default => 'block',
    'inline' => [
        'grid gap-x-3 gap-y-1.5 items-center',
        'has-[[data-flux-label]~[data-flux-control]]:grid-cols-[1fr_auto]',
        'has-[[data-flux-control]~[data-flux-label]]:grid-cols-[auto_1fr]',
        '[&>[data-flux-control]~[data-flux-description]]:row-start-2 [&>[data-flux-control]~[data-flux-description]]:col-start-2',
        '[&>[data-flux-control]~[data-flux-error]]:col-span-2 [&>[data-flux-control]~[data-flux-error]]:mt-1', // Position error messages...
        '[&>[data-flux-label]~[data-flux-control]]:row-start-1 [&>[data-flux-label]~[data-flux-control]]:col-start-2',
        'has-[[data-flux-label]~[data-flux-input]]:grid-cols-[1fr_auto]' // <-- added this in the field component
    ],
})

The problem is that the data-flux-control is not a sibling of the data-flux-label because it is generated inside a div[data-flux-input]. I fixed it for my particular use case, but I would assume that the component is always generated like that so maybe change data-flux-control for data-flux-input everywhere instead of adding styles (or have both to be safe).

<ui-field data-flux-field="">
    <ui-label data-flux-label="">ID du compte:</ui-label>              
    <div data-flux-input="">
            <input type="text" data-flux-control="" data-flux-group-target="">
        </div>
</ui-field>

[calebporzio]

Ah yes, currently variant="inline" is only meant for checkboxes, switches, and radio inputs (inline input elements). Not necessarily re-arranging full-width inputs to be on the same line as labels.

However, I see both the desire for this behavior and the confusion why variant="inline" doesn't do it.

I'll leave this open until I can at least explore the possibility of making it work. Thanks for the report.

[calebporzio]

I'm going to close this and consider it a feature request for now. I tried to do a basic implementation, but couldn't figure out a nice API for it that didn't conflict with the current one. Thanks everyone for weighing in on this.