data-aether-autofocus

This attribute determines which element the focus will automatically land on when a window or panel is opened. it allows users to perform actions without reaching for the mouse or repeatedly pressing the Tab key.

01 Usage

This attribute is added to a child element (usually an input or button) inside the Target Element. The system searches for this element the moment the modal or panel opens and applies the `.focus()` operation.

index.html

<!-- Trigger -->
<button
    class="px-4 py-2 cursor-pointer bg-primary border border-primary rounded-lg text-primary hover:text-primary-interactive hover:border-primary-interactive transition-colors flex items-center gap-2"
    data-aether-trigger="ui-control"
    data-aether-target="demo-modal"
    data-aether-sync-url>
    Open
</button>

<!-- Wrapper -->
<div
    id="demo-modal"
    class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
    data-aether-scroll-lock
    data-aether-focus-trap>

    <!-- Backdrop -->
    <div class="absolute inset-0 bg-primary/80 backdrop-blur-sm"
        data-aether-trigger="ui-control"
        data-aether-target="demo-modal"
        data-aether-action="close"></div>

    <!-- Content -->
    <div class="relative bg-secondary border border-primary w-full max-w-md p-6 rounded-2xl shadow-2xl scale-100 transition-all">
        <h3 class="text-xl text-center font-bold text-primary mb-2">Hello World</h3>
        <p class="text-secondary text-center mb-6">This modal initially focuses on the email input field.</p>

        <div class="space-y-4">

            <div>
                <input type="text"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="Test">
            </div>

            <div>
                <input type="text"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="Test">
            </div>

            <div>
                <input type="text"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="Test">
            </div>

            <div>
                <input type="email"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="example@aether.com"
                    data-aether-autofocus>
            </div>

            <div>
                <input type="password"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="password">
            </div>

            <div class="flex items-center justify-between text-sm">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" class="rounded border-primary bg-primary text-accent focus:ring-accent">
                    <span class="text-tertiary">Remember me</span>
                </label>
                <a href="#" class="text-accent hover:underline">Forgot Password</a>
            </div>

            <button class="w-full cursor-pointer py-2.5 bg-tertiary hover:bg-tertiary-interactive text-secondary hover:text-secondary-interactive rounded-lg font-bold transition-colors mt-2"
                data-aether-trigger="ui-control"
                data-aether-target="demo-modal"
                data-aether-action="close">
                Login
            </button>
        </div>
    </div>

</div>

02Priority Ranking

When a panel opens, AetherUI decides where to give focus based on the following order:

Rank	Criterion	Description
1.	data-aether-autofocus	If present, focus is given directly to this element. Highest priority.
2.	First Focusable Element	If no autofocus exists, it finds the first input, button, or link inside.
3.	Container Element	If there are no interactive elements inside, focus is given to the container itself.

03 Practical Tip

Prevent Unnecessary Clicks

When a user clicks an "Edit" button, focusing directly on the first field to be edited (e.g., Name/Surname) in the resulting form is a professional UX standard.

Otherwise, the user opens the form, moves the mouse to the input box, clicks, and then starts typing. autofocus eliminates these 3 steps.