$id Magic Property

Generate a unique ID for accessibility and ARIA.

What is $id?

$id generates a unique ID string, optionally with a prefix. It's specifically designed to help with accessibility by creating unique identifiers for elements that need to be linked via aria-labelledby, aria-describedby, or for attributes.

When to Use

Use $id whenever you create interactive components like dropdowns, modals, or tabs that require unique IDs for ARIA attributes. It guarantees no ID collisions on the page, even if multiple components use the same prefix.

Basic Example

Code

<div x-data="{ open: false, id: $id('dropdown-button') }">
  <button :id="id" @click="open = !open">Toggle</button>
  <div :aria-labelledby="id" x-show="open">Dropdown content</div>
</div>

How It Works

$id returns a string like dropdown-button-1, dropdown-button-2, etc. The number increments automatically for each component that uses the same prefix, ensuring global uniqueness.

💡 Tip

Always use $id for any id attribute that needs to be unique, especially in reusable components that might appear multiple times on the same page.

Helpful? Share this page!↑ Back to top