Attribute Index

Complete listing of all attributes — native HTML attributes and VB's data-* enhancers — organized by category.

Filter by type All 105 native 52 layout 7 behavior 28 formatting 3 styling 15

Native Attributes

Global

classnative

CSS class variants for buttons, navigation, forms, tables, and more

tabindexnative

Control keyboard focus order and programmatic focusability

autofocusnative

Automatically focus an element on page load or dialog open

spellchecknative

Enable or disable browser spell-checking on editable content

autocapitalizenative

Control automatic capitalization on mobile virtual keyboards

titlenative

Advisory tooltip text with accessibility caveats and alternatives

accesskeynative

Keyboard shortcut to activate or focus an element

autocorrectnative

Control automatic text correction on mobile devices

Performance

loadingnative

Lazy loading, fetch priority, and image decoding hints for performance

async-defernative

Script loading strategies — async, defer, and module execution order

blockingnative

Explicit render-blocking control for scripts, styles, and links

Forms

autocompletenative

Browser autofill hints for one-tap form completion on mobile

inputmodenative

Control which virtual keyboard appears on mobile devices

enterkeyhintnative

Customize the Enter key label on mobile virtual keyboards

patternnative

Regex validation, numeric constraints, and character limits for form inputs

disablednative

Disable form controls — fieldset cascade, submission exclusion, and styling

readonlynative

Make inputs non-editable while still submitting their values

requirednative

Mark form fields as mandatory with constraint validation and CSS pseudo-classes

placeholdernative

Input hint text — when it helps, when it hurts, and accessible alternatives

novalidatenative

Bypass native form validation for custom validation or draft saving

multiplenative

Allow multiple selections in select, email, and file inputs

listnative

Connect inputs to datalist for autocomplete suggestions

formnative

Associate form controls with a form outside their DOM ancestor

Interactivity

popovernative

Zero-JS popovers, menus, and tooltips via the Popover API

contenteditablenative

Make any element editable with optional plaintext-only mode

hiddennative

Hide elements, collapse searchable content, or disable interaction with inert

draggablenative

Enable native drag-and-drop on any element with the HTML Drag and Drop API

Links & Security

relnative

Link relationships for security, performance, SEO, and resource hints

referrerpolicynative

Control how much referrer information is sent with requests

integritynative

Subresource integrity — verify CDN files have not been tampered with

crossoriginnative

CORS mode for scripts, images, fonts, and media — anonymous or credentialed

sandboxnative

Iframe security sandbox with granular permission tokens

downloadnative

Trigger file download instead of navigation with optional filename override

targetnative

Control where links open — new tabs, named targets, and frame navigation

noncenative

CSP inline script and style allowlisting with one-time tokens

Accessibility

langnative

Declare content language for screen readers, hyphenation, and spell-checking

dirnative

Set text direction for right-to-left languages and bidirectional content

translatenative

Mark content as translatable or non-translatable for translation tools

Media

srcsetnative

Responsive images with resolution switching, art direction, and sizes

posternative

Video placeholder image displayed before playback starts

preloadnative

Media loading strategy — none, metadata, or auto for bandwidth vs UX

controlsnative

Native media controls with controlslist for selective button removal

allownative

Iframe permissions policy for camera, microphone, fullscreen, and more

Structure

opennative

Toggle visibility of details and dialog elements with JS and CSS hooks

datetimenative

Machine-readable dates on time, del, and ins elements

citenative

Source URL for blockquote, del, and ins — semantic but invisible

reversednative

Reversed and custom-start ordered lists for countdowns and rankings

wrapnative

Textarea line-wrapping behavior — soft vs hard and its effect on submission

dirnamenative

Submit text directionality alongside form values

isnative

Customized built-in elements — extend native HTML with custom behavior

pingnative

Send tracking pings on link clicks with privacy considerations

srcdocnative

Inline HTML content for iframes without a separate document

Data Attributes

Layout

data-layoutlayout

Apply stack, cluster, grid, center, sidebar, split, cover, and other layouts to any element

data-page-layoutlayout

Full-page grid layouts with semantic area assignment

data-layout-densitylayout

Compact or spacious spacing modes that cascade to descendants

data-stickylayout

Sticky positioning for header and footer elements — sticks to top or bottom on scroll

Formatting

data-format-numberformatting

Locale-aware number formatting via Intl.NumberFormat

data-format-dateformatting

Locale-aware date and relative time formatting

data-format-bytesformatting

Human-readable file size formatting

data-tickerbehavioreffects

Animated number count-up on scroll

Math

data-mathbehavior

Enhance code elements with precompiled MathML rendering, numbering, and copy-to-clipboard

Clipboard & Selection

data-copybehavior

Copy text to clipboard on click with visual feedback

data-select-allbehavior

Master checkbox for bulk selection

Visual Effects

data-effectbehavior

Unified composable effect system: fade-in, shimmer, neon, reveal, glitch, and 20+ more

data-triggerbehavior

Controls when effects activate: scroll, hover, click, or timed delay

data-staggerbehavior

Cascades timing to children for choreographed entrance sequences

data-transitionbehavior

Declarative View Transitions: morph, slide, fade, scale, and stagger for state changes

data-emojibehaviorextras

Replace :shortcode: text with Unicode emoji characters

Interaction

data-hotkeybehavior

Platform-aware keyboard shortcut display

data-spoilerbehavior

Content concealment with blur, solid, or noise effects

data-animate-imagebehavioreffects

Play/pause control for animated GIF, WebP, and APNG images

data-splitterbehavior

Resizable drag divider between panels with keyboard support

Form Controls

data-switchbehavior

Transform a checkbox into a sliding toggle switch with size variants

data-rangebehavior

Cross-browser styled range slider with value bubble and tick markers

data-stepperbehavior

Custom increment and decrement buttons for number inputs

data-colorbehavior

Styled color swatch with hex display for color inputs

data-maskbehavior

Input masking for phone, credit card, date, and custom patterns

data-acceptbehavior

Character filtering for phone, date, credit card, hex, and custom character classes

data-uploadbehavior

Drag-and-drop file upload zone with file list display

data-toggle-tagsbehavior

Checkbox pill chips for tag-based multi-select filtering

data-strengthbehavior

Real-time password strength meter with configurable rules

Form Behavior

data-countbehavior

Live character or word count for textareas with threshold warnings

data-growbehavior

Auto-expanding textarea using CSS field-sizing with JS fallback

data-show-whenbehavior

Conditionally show or hide form sections based on field values

data-autosavebehavior

Persist form drafts to localStorage with auto-restore on reload

data-wizardbehavior

Multi-step form wizard with per-step validation and progress tracking

Styling

data-numberedstyling

Auto-number article headings with CSS counters

data-drop-capstyling

Large decorative first letter for article opening paragraphs

data-prosestyling

Optimized typography for long-form article content

data-ornamentstyling

Custom symbol or text ornament for horizontal rules

data-badgestyling

Pill-shaped badge styling for time elements

data-stripedstyling

Alternating row backgrounds for definition lists

Shapes

data-shape-startstyling

Clip the top edge of a section with wave, chevron, scallop, or diagonal shapes

data-shape-endstyling

Clip the bottom edge of a section with wave, chevron, scallop, or diagonal shapes

data-clipstyling

Responsive shape masking for images and figures using CSS shape()

data-badge (shape)styling

Inline shaped labels with clip-path — ribbon, notch, flag, double-arrow, stamp

data-calloutstyling

Block callout containers with speech, notched, and tip shape variants

data-bubblestyling

Chat bubble shapes for messaging UIs — incoming, outgoing, assistant, thought, typing

data-cutoutstyling

Punch-out shapes using evenodd fill rule — circle, diamond, arch-window, hex

data-border-shapestyling

Two-layer shaped borders for images and containers — hexagon, diamond, arch

data-morphstyling

Shape morphing animations — pulse, breathe, wave with prefers-reduced-motion support

Infrastructure

data-printlayout

Print optimization modes, visibility control, page breaks, and opt-out for printed output

hide-until-readylayout

Prevent FOUC by hiding elements until custom elements are defined

view-transitionslayout

CSS View Transitions with named groups, shared elements, and presets

data-toc-ignorebehavior

Exclude headings or containers from page-toc generation