List of flux attributes

This page is the reference sheet for every public Flux directive and attribute. The rest of the guide introduces them gradually, but it's useful to have them listed here in one place.

data-flux

Values are separated by whitespace. For example, data-flux="update-inner flux-size" combines a server update target with measured CSS dimensions. Connection expressions stay together inside parentheses, including spaces within their selectors. See CSS properties for the full syntax and property reference.

data-flux="auto"

The explicit form of an empty data-flux attribute, useful in combinations such as <form data-flux="auto flux-form">. On a form it enables background submission and outer updates; on a link it enables background navigation; on a button it enables background submission of its form.

CSS property sources

Directive	Values exposed
flux-pointer	Local pointer X/Y, normalised to 0–1 and in CSS pixels
flux-pointer-global	Viewport pointer X/Y, normalised to 0–1 and in CSS pixels
flux-size	Border-box width and height in CSS pixels
flux-visible	Current geometric viewport intersection, 0/1
flux-first-visible	First-intersection history, 0/1
flux-range	Range value normalised across min/max
flux-select	Numeric selected option value
flux-color	Selected colour
flux-field	Length, validity, character budget, and interaction history
flux-form	Valid/invalid field counts and validity ratio
flux-palette	Image/video colours and temperature
flux-truncated	Content clipping on either axis
flux-time	Local seconds, minutes, twelve-hour time, and clock-hand scalars
flux-date	Calendar values, localised names, and year/month/week/day progress

See Time and date for the clock and calendar reference, including the --flux-day-scalar name.

These directives expose properties on their declaring element. They can be combined with existing request and update directives. (flux-pointer,flux-size@footer > .preview, #summary) also copies the named sources' properties to all matching destinations. See CSS properties for each property's exact name, defaults, and lifecycle.

data-flux on a <form>

Shorthand for an automatic Flux container. Flux listens for the form's submit event, submits it in the background, and registers the form as an outer update target.

<form method="post" data-flux>
	<button name="do" value="save">Save</button>
</form>

When the response contains the matching form, Flux replaces the current form with the one from the response.

data-flux on an <a>

Shorthand for data-flux="link".

<a href="/next-page" data-flux>Next page</a>

data-flux on a <button>

Shorthand for data-flux="submit".

<button name="do" value="save" data-flux>Save</button>

data-flux="update" and data-flux="update-outer"

Replace the whole element with the matching element from the returned HTML document.

data-flux="update-inner"

Keep the element itself, but replace its contents with the matching element's contents from the returned document.

data-flux="update-link"

Apply an outer replacement only for Flux link navigation.

data-flux="update-link-inner"

Apply an inner replacement only for Flux link navigation.

data-flux="live" and data-flux="live-outer"

Poll the current page URL and replace the whole element on each refresh.

Live targets can also be refreshed early from another Flux response, such as a form submission, when that response already contains the matching live element.

data-flux="live-inner"

Poll the current page URL and replace only the contents of the element.

Like live, this can also update early from another Flux response.

data-flux="update-attributes"

Refresh just the element attributes from the matching element in the returned document.

data-flux="submit"

Attach background submission to the containing <button>'s form.

data-flux="link"

Attach background navigation to an anchor element.

data-flux="autosave"

Attach change-driven background submission to the containing form. This directive must be placed on a <button>, and Flux hides that button automatically.

<form method="post">
	<input name="title" />
	<button name="do" value="save" data-flux="autosave">Save</button>
</form>

data-flux="autocomplete" and data-flux="autocomplete-results"

Put autocomplete on a GET form to preview server results while typing. Mark the result region in the response with autocomplete-results. Flux inserts that region after the form; pressing Enter still follows the form's normal action. Arrow keys move between the field and result links.

data-flux-min-length on the form controls the minimum value length before requesting results (default 3). Use 0 to allow empty searches. See the search example.

data-flux="drag-order"

Enhance a server-rendered ordering form into a drag-and-drop control. This directive can be placed either on the sortable item or on the <form> inside it.

Flux expects the sortable host to contain a form with:

• an input named order
• a button named do

<ul data-flux="update">
	<li data-id="1" data-flux="drag-order">
		<form method="post">
			<input type="hidden" name="id" value="1" />
			<label>
				<span>Move to order</span>
				<input type="number" name="order" />
				<button name="do" value="move">Move</button>
			</label>
		</form>
		<span>one</span>
	</li>
</ul>

Flux hides the order input, the do button, and any containing labels, then adds a .drag-handle element. When the item is dropped, Flux writes the zero-based position into order and submits the form in the background.

Moving between lists

Add an input named parent to the ordering form and data-flux-drag-parent to each destination container. Flux submits the destination's value along with the zero-based order. data-flux-drag-handle on the item or its container changes the handle text. See the board example.

Rate and timing attributes

data-flux-scroll

Control how Flux restores scroll positions during link navigation and browser history navigation.

This attribute can be placed on the scrolling element that contains a Flux link:

<section data-flux-scroll="smooth">
	<a href="/reports" data-flux>Reports</a>
</section>

Supported values are:

• auto - restore scroll positions immediately
• smooth - restore scroll positions with smooth browser scrolling

Flux uses the nearest data-flux-scroll ancestor of the clicked link. On ordinary elements, Flux stores and restores that element's own scrollTop and scrollLeft. On <body> or <html>, Flux stores and restores the window scroll position, which gives page-wide behaviour.

data-flux-rate

Control how often a Flux interaction can happen. On buttons and links it throttles requests, and on live elements it sets the polling interval.

<button data-flux="submit" data-flux-rate="1">Save</button>
<a href="/news" data-flux="link" data-flux-rate="2">Refresh</a>
<time data-flux="live" data-flux-rate="5">12:00:00</time>

The values are in seconds.

On live elements, omitting data-flux-rate leaves Flux using a one-second interval.

If a live target is refreshed early by another Flux response, Flux treats that as a fresh live update and schedules the next poll from that point.

Matching rule

If a Flux element has an id attribute, the matching id of subsequent responses will be used when replacing. However, flux does not require you to add an id to elements that need replacing. Instead, it records the current element's path through the DOM and looks up the element at that same path in the new document.

Important

When we return a fresh HTML document from the server, the structure around Flux targets should stay consistent enough for Flux to find the matching element in the same place.

---

If you want the walkthrough version of the docs rather than the reference sheet, go back to your first Flux form or continue on to examples.