Skip to content

Fix field spacing when only using description#2665

Open
joshhanley wants to merge 1 commit into
mainfrom
josh/fix-description-only-field-spacing
Open

Fix field spacing when only using description#2665
joshhanley wants to merge 1 commit into
mainfrom
josh/fix-description-only-field-spacing

Conversation

@joshhanley

@joshhanley joshhanley commented Jun 24, 2026

Copy link
Copy Markdown
Member

The Scenario

When rendering Flux input fields, a description without a label sits directly against the input. The spacing is correct for a label-only field, and also for a field that has both a label and description.

CleanShot 2026-06-25 at 09 47 34@2x
<div class="space-y-8">
    <div>
        <flux:heading size="lg" level="2" class="mb-4">Label</flux:heading>

        <flux:input label="Input label" placeholder="Input value" />
    </div>

    <div>
        <flux:heading size="lg" level="2" class="mb-4">Label + description</flux:heading>

        <flux:input label="Input label" description="Input description" placeholder="Input value" />
    </div>

    <div>
        <flux:heading size="lg" level="2" class="mb-4">Description</flux:heading>

        <flux:input description="Input description" placeholder="Input value" />
    </div>
</div>

The Problem

The field spacing selector handles label+description but not description on it's down. As such the description has no bottom margin when there is no label.

The Solution

Add a field spacing selector for descriptions that are the first child and have following content. This gives description-only fields the same mb-3 gap used between label descriptions and controls.

'[&>[data-flux-description]:first-child:has(+*)]:mb-3',

The selector is scoped to that leading-description case, so existing label + description spacing remains unchanged.

CleanShot 2026-06-25 at 09 50 30@2x

Fixes #2664

@joshhanley joshhanley changed the title Fix description-only field spacing Fix field spacing when only using description Jun 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Components without label are missing description padding

1 participant