Skip to content

24 Element reference

Jump to bottom
Roberto Ferranti edited this page Nov 3, 2026 · 25 revisions

Element reference

Every element ful registers, with its attributes, slots and events.

This page is generated from dist/custom-elements.json by manifest/wiki-reference.mjs. The manifest is read from the same declarations the runtime uses and a test fails whenever the two disagree, so edit the element or its metadata rather than this page.

The same data ships to editors as dist/custom-elements.json (the community manifest), dist/web-types.json (JetBrains) and dist/vscode.html-custom-data.json (VS Code), so an IDE pointed at the package completes these attributes for you.

Forms

<ful-form>

Wraps its content in a form, collects the values of the fields it contains and hands them to the loader named by loader (loaders:form by default) on submit: with action the values travel as json (method, POST by default) through the request-mapper and response-mapper components when declared, without it the submit:requested listeners deliver the response themselves. Validation errors are announced politely without focus, or exactly once through focus management with scroll-on-error, and clear-invalid-on-change drops a field's problem as soon as the field changes again; global errors land in an author-provided ful-errors element, announced as an alert.

Attributes

attribute type meaning
action string The endpoint the values are submitted to. With it the form posts json through a RemoteJsonFormLoader; without it a LocalFormLoader hands the outcome to whatever a submit:requested listener resolves with.
method string The http method of the remote loader, POST by default.
loader string The registry component key of the form loader, loaders:form by default. A loader of your own implements prepare, submit and transform.
request-mapper string A registry component key, (values, form) => request, applied to the extracted values before they are sent.
response-mapper string A registry component key, (response, form) => mapped, applied to a successful response before it reaches submit:success.
clear-invalid-on-change boolean Clears a field's custom validity as soon as that field changes again, so a server problem stops being shown the moment the user addresses it.
scroll-on-error boolean Moves focus, and the viewport with it, to the topmost invalid field when errors land. The error live region is muted while focus moves, so each problem is announced once through the focused field rather than twice.
autocomplete string The autofill token every field in the form takes unless it declares one of its own, copied onto the form element the host renders. A form cannot pass it down the way the platform would: each control carries form="" so that the host is the only thing that submits, which leaves it with no form owner to inherit through, so the fields read it off the form instead.
track-changes boolean Keeps track of the edits not saved yet: dirty answers whether a field the user edited since the last commit holds another value, the host matches :state(dirty) and the submit buttons carry a dot while it does. A successful submit commits, and so does the form once its fields have rendered; commit() is for a save of the page's own, and save() submits only while there is something to save, answering whether nothing unsaved is left. A ful-drawer or ful-dialog under guard-dismiss asks before a dismissal drops the edits.
guard-leave boolean Asks before the page is left while the form holds edits not saved yet, through the browser's own prompt. Implies track-changes.

Events

event detail
submit Cancelable. Fired before anything is sent: preventDefault aborts the submit.
submit:requested Fired after the submit was accepted, to let a listener resolve the response itself. Register it through AsyncEvents.asyncOn: the form awaits only such a listener, and one added with addEventListener is not waited for.
submit:success Fired with the submitted values and the mapped response, once the form has settled: the spinner is released, the buttons are no longer held off and a listener may submit again.
submit:failure Fired with the exception when the submit fails, once the form has settled: the spinner is released and the problems of a Failure are already shown, so a listener writing errors has the last word. The form does not rethrow: submit() resolves false, as it resolves true after submit:success.
dirty:change Fired under track-changes when the form starts or stops holding edits not saved yet, with dirty in the detail.

Fields

<ful-input>

A labelled text input. Use type to pick any native input type, the keypad types numeric and decimal, or textarea; keep names the characters that survive a keystroke and reject the ones that do not, the caret staying among the survivors, and the uppercase and trim claims shape the value before it is read; v-type=number decodes the value to a number, blank staying null and a value that does not decode kept as it is, an undeclared type defaulting to number. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string The current value.
placeholder string Placeholder shown while the field is empty.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the current value when the field is committed.

<ful-checkbox>

A checkbox, or a switch with type="switch". Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string switch renders the control as a switch rather than a checkbox. The value and the semantics are unchanged.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value boolean Checked when the attribute is the string true.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.

Events

event detail
change Fired with the new checked state when the box or its label is clicked.

<ful-radio-group>

A group of radios, declared as ful-radio children. With type="boolean" the value is a real boolean. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
name string The name the radio inputs share, which is what makes them one group. Generated when absent, so a group only needs it to be addressed from outside.
type string boolean maps the two declared radios onto true and false rather than onto their own values.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string The value of the selected radio.

Slots

slot content
(default) The legend of the group, and its ful-radio children.
header Content rendered above the radios.
footer Content rendered below the radios.

Events

event detail
change Fired with the value of the selected radio.

<ful-select>

A combobox backed by a loader that acts like a select: the field mirrors the label of a single selection, clicking anywhere on it toggles the dropdown, which opens highlighting the current selection, and Home, End, PageUp, PageDown and Alt+arrows navigate it. A multiple selection renders as ful-badge chips. Without src the slotted options are the vocabulary; with src the options are fetched once (method, POST by default, preload fetching them while upgrading, revision caching them in local storage) or asked per query under mode=chunked, the response shaped through the k-expr/l-expr/d-expr/m-expr expressions or a response-mapper component, and every key coerced as k-type declares. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
name string The field name the surrounding form submits the selection under.
loader string The registered component name the select loads its vocabulary through; loaders:select when absent.
k-type string How a key coerces when it arrives from the response or from the value attribute: number, string or boolean.
mode string chunked asks the endpoint per query instead of fetching the vocabulary once, for a list too large to hold.
preload boolean Fetches the vocabulary while the element upgrades rather than on first use. The field paints immediately either way; the options arrive when they arrive.
revision string Caches the fetched vocabulary in local storage under this revision; a load under a different one is a miss that evicts the entry. It is the cache's namespace, so a vocabulary that differs per user wants the principal in it. Left valueless, the revision the registry's 'revision' component answers is used, so a page states its build once instead of every element repeating it.
k-expr string The expression yielding an option's key, evaluated against each row of the response. Set it together with l-expr to shape a response without a mapper component.
l-expr string The expression yielding an option's label, evaluated against each row of the response.
d-expr string The expression yielding the rows from the response body; the body itself when absent.
m-expr string The expression yielding an option's metadata, evaluated against each row; the whole row when absent.
response-mapper string The registered component name that turns a response into { key, label, metadata } entries. The k-expr/l-expr pair takes precedence; without either, the response is read as positional rows.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string The selected keys, comma separated, whether or not the select is multiple. A key given here is trimmed and cannot contain a comma; assign such a key through the property instead. The property answers a key for a single select and an array for a multiple one. A single select reads a present but empty attribute as the empty key, the one an carries, where an absent attribute means no selection; a multiple select reads it as no keys.
multiple boolean Selects any number of options rather than one: the value is a comma separated list of keys and the selection renders as ful-badge chips.
item-list boolean Shows the selection as a ful-item-list under the control. For a multiple select the list replaces the ful-badge chips, which it hides; a single select keeps its label in the field as well.
src string The url the vocabulary is fetched from. Without it the slotted elements are the whole vocabulary, held in memory. Stays live: writing it builds the loader again and reloads as reload() does, dropping a selected key the new vocabulary does not know.
method string The method the vocabulary is fetched with; POST when absent. Stays live, as src does.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.
dropdown Replaces the template used to render the options.

Events

event detail
change Fired with the selection, an array when multiple.

<ful-dropdown>

The options popup of a ful-select, with a localized no-results message when the search matches nothing. An entry whose metadata.disabled is truthy is refused: its row carries aria-disabled and metadata.reason as its title, the arrows and Home/End walk past it, and a click on it changes nothing. Rarely used on its own.

Attributes

attribute type meaning
listbox string The id to give the listbox, so a host can point aria-controls and aria-activedescendant at it before this element upgrades.

Events

event detail
activechange Fired with the id of the option the reader is on, for the combobox that controls the listbox.
change Fired with the option that was picked.

<ful-input-file>

A file input with an optional dropzone and a list of the selected files, enforcing the size and count limits it declares; the noinput claim hides the picker control, the dropzone and the item list carrying the field alone. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string Only an empty value is honoured, to clear the selection: file inputs cannot be filled programmatically.
placeholder string Placeholder shown while the field is empty.
accept string Comma separated list of accepted tokens: an extension (.pdf), a mime type (application/pdf) or a wildcard (image/*). Files that do not match are dropped with a warning.
multiple boolean Allows selecting more than one file.
item-list boolean Shows the list of selected files.
dropzone boolean Shows the dropzone.
max-files number Maximum number of files. Exceeding it clears the selection.
max-file-size number Maximum size of a single file, in bytes. Larger files are dropped.
max-total-size number Maximum size of all the selected files, in bytes. Exceeding it clears the selection.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.
dropzone Replaces the contents of the default dropzone.

Events

event detail
change Fired with the names of the selected files.

Temporal

<ful-input-local-date>

A date input. Its bounds accept a date, now, or an offset such as +1d, -2m or +3y. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string The current value.
placeholder string Placeholder shown while the field is empty.
step string Step between selectable dates, in days.
min string Earliest selectable date. Accepts a date, now, or a day, month or year offset.
max string Latest selectable date. Accepts a date, now, or a day, month or year offset.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the current date.

<ful-input-local-time>

A time input. Its bounds accept a time, now, or an hour or minute offset, snapped to the step grid. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string The current value.
placeholder string Placeholder shown while the field is empty.
step string Step between selectable times, in seconds. The bounds are truncated to this grid.
min string Earliest selectable time. Accepts a time, now, or an offset such as +2h or -30m.
max string Latest selectable time. Accepts a time, now, or an offset such as +2h or -30m.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the current time.

<ful-input-instant>

A datetime input whose value is read and written as an ISO instant. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string The current value.
placeholder string Placeholder shown while the field is empty.
step string Step between selectable instants, in seconds.
min string Earliest selectable instant, as an ISO instant.
max string Latest selectable instant, as an ISO instant.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the current instant.

<ful-local-date>

Formats the date in its content, written as yyyy-mm-dd, in the locale of the page or the one its locale attribute names; default is shown when the content is empty.

Attributes

attribute type meaning
locale string The locale the date is formatted in, taking precedence over the page's. The platform default applies when neither names one.
default string The text rendered when the content is blank or does not parse as a date.

<ful-instant>

Formats the ISO instant in its content in the locale and timezone of the page or the one its locale attribute names; default is shown when the content is empty.

Attributes

attribute type meaning
locale string The locale the instant is formatted in, taking precedence over the page's. The platform default applies when neither names one.
default string The text rendered when the content is blank or does not parse as an instant.

Tables

<ful-table>

A table that loads its rows from a loader, with sorting, pagination and an optional filter form. Its columns are declared in a schema slot; the rows come from src (method, GET by default) through the loader named by loader (loaders:table by default), page-size rows a page (10 by default), the first one loading on upgrade under the autoload claim.

Attributes

attribute type meaning
loader string The registered component name the table loads its rows through; loaders:table when absent.
autoload boolean Loads the first page while upgrading, instead of waiting for a reload(). With a filters slot the load goes through the filter form's submit, so its submit listeners shape it as they shape the later loads. The load is not awaited, so a slow or failing loader cannot hold up the page.
page-size number How many rows a page asks the loader for, 10 by default. Stays live: writing it reloads from the first page, a table that has not been asked to load yet only recording it.
src string The url the default loader asks for rows; without it the table loads from an in-memory loader fed through withLoader. Stays live: writing it builds the loader again and reloads from the first page, keeping the sort and the filters.
method string The http method the default loader sends, GET by default. Stays live, as src does.

Slots

slot content
filters Fields wrapped in a ful-form, submitted to filter the table.
caption The caption of the table.
empty Shown in place of the rows when a load returns none, replacing the localized default message. Rendered per load in the rows' own scope, so its expressions read schema, pageRequest, filterRequest and pageResponse: an empty state can tell nothing-there from a filter that matched nothing.
footer Content rendered in the table footer.

Events

event detail
load:success Fired once a load has settled, after the rows are in place, the elements in them have rendered and the busy state is gone, carrying the page response and the three requests that asked for it. Not fired for a load a newer one superseded, which owns nothing.
load:failure Fired when a load rejects, after the error row is shown, carrying the exception and the three requests. Telling this from an empty result is what the aria-busy attribute alone cannot do.

<ful-pagination>

The pager of a ful-table, its window rendering at most pages links (5 by default). Rarely used on its own.

Attributes

attribute type meaning
pages number How many page buttons are rendered around the current one, 5 by default.
total number Number of pages.
current number Zero based index of the page being shown.

Events

event detail
page:requested Fired with the zero based index of the page the user asked for.

<ful-sorter>

The sort control rendered in a ful-table header, focusable and activated by Enter and Space, carrying aria-sort on its header cell. Rarely used on its own.

Attributes

attribute type meaning
sorter string The field name this column sorts by, sent in the load request. A column without it is not sortable.
order string The sort currently applied, asc or desc, or absent when unsorted.

Events

event detail
sort:requested Fired with the sorter and the next order when activated.

Filters

<ful-filter-text>

A ful-table filter over text, with an operator such as CONTAINS or STARTS_WITH and a case sensitivity. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
operator string Fixes the operator for the element's life: no menu and no button render, and every tuple carries it. The plural is the menu's whitelist; declaring both warns, the singular winning, and an unknown name warns and pins the filter's default.
sensitivity string Fixes the case sensitivity for the element's life, on the operator's terms: the button leaves and every tuple carries it.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string JSON tuple of the operator, the sensitivity and the text.
placeholder string Placeholder shown while the field is empty.
operators string Comma separated list of the operators the menu offers, out of EQ, NEQ, LT, GT, LTE, GTE, BETWEEN, CONTAINS, STARTS_WITH, ENDS_WITH. Defaults to all of them.
sensitivities string Comma separated list of the case sensitivity modes, IGNORE_CASE, CASE_SENSITIVE. A single entry pins every emitted tuple to it.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the whole tuple, or undefined when the filter is empty.

<ful-filter-number>

A ful-table filter over numbers, with an operator such as GTE or BETWEEN. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
operator string Fixes the operator for the element's life: no menu and no button render, and every tuple carries it. The plural is the menu's whitelist; declaring both warns, the singular winning, and an unknown name warns and pins the filter's default.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string JSON tuple of the operator and its bound(s).
placeholder string Placeholder shown while the field is empty.
operators string Comma separated list of the operators the menu offers, out of EQ, NEQ, LT, GT, LTE, GTE, BETWEEN. Defaults to all of them.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the whole tuple, or undefined when the filter is incomplete.

<ful-filter-boolean>

A ful-table filter over booleans, with the EQ or NEQ operator and a yes/no menu carrying the true and false tokens, plus an any entry that contributes nothing. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string JSON tuple of the operator and the token.
operators string Comma separated list of the operators the menu offers, out of EQ, NEQ. Defaults to both.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the whole tuple, or undefined when nothing is picked.

<ful-filter-local-date>

A ful-table filter over a date, with an operator and one or two bounds. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
operator string Fixes the operator for the element's life: no menu and no button render, and every tuple carries it. The plural is the menu's whitelist; declaring both warns, the singular winning, and an unknown name warns and pins the filter's default.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string JSON tuple of the operator and its bounds, for example ["BETWEEN", from, to].
placeholder string Placeholder shown while the field is empty.
operators string Comma separated list of the operators the menu offers, out of EQ, NEQ, LT, GT, LTE, GTE, BETWEEN. Defaults to all of them.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the whole tuple, or undefined when the filter is incomplete.

<ful-filter-instant>

A ful-table filter over an instant, with an operator and one or two bounds. Disabled follows native semantics: the attribute is the field's own claim, honored together with a disabled fieldset ancestry through :disabled, while the property reflects the claim only.

Attributes

attribute type meaning
type string Any native input type, the literal textarea to render one, or numeric and decimal, which render a text input carrying that inputmode and filter what can be typed: numeric takes digits and a leading minus, decimal one separator as well, answering it as a dot whatever the keyboard offered. Neither enforces min, max or step, which the native number type still does. Defaults to number under v-type=number, and a declared type wins.
v-type string number decodes the value to a number on the way out: blank stays null and a value that does not decode is kept as it is.
keep string A regular expression naming what survives: on every input event the whole value is filtered to its matches, concatenated, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class, and the pattern must match each partial value typed on the way to a complete one.
reject string The same filter from the other side: a regular expression naming what is stripped from the value on every keystroke. Declaring both applies keep and warns once.
uppercase boolean Upper-cases the value on the way out, leaving what was typed alone.
trim boolean Trims the value on the way out, leaving what was typed alone.
unsigned boolean Refuses the leading minus a numeric or decimal field otherwise takes. It narrows the type's own filter rather than replacing it, so a decimal still keeps one separator and still answers with a dot. Meaningless on any other type, where the sign is the native control's business, and a declared keep or reject still outranks it.
autocomplete string The autofill token the browser classifies the control by, one of the names the html autocomplete grammar defines (name, given-name, street-address, postal-code, one-time-code, off, ...). It is set on the control itself because the control carries form="", which leaves it without a form owner to inherit a form-wide setting from. Read once at the upgrade. A value outside the grammar reads as on, so an identifier of your own does not switch autofill off.
operator string Fixes the operator for the element's life: no menu and no button render, and every tuple carries it. The plural is the menu's whitelist; declaring both warns, the singular winning, and an unknown name warns and pins the filter's default.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string JSON tuple of the operator and its bounds, for example ["BETWEEN", from, to].
placeholder string Placeholder shown while the field is empty.
operators string Comma separated list of the operators the menu offers, out of EQ, NEQ, LT, GT, LTE, GTE, BETWEEN. Defaults to all of them.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.

Events

event detail
change Fired with the whole tuple, or undefined when the filter is incomplete.

<ful-filter-in>

A ful-table filter over set membership, answering for both of data-jpa's set annotations: InEnum and InList take the same array of values and no operator, differing only in what the server converts them to. The vocabulary comes from wherever a select's does, slotted options or a loader, and the value is an array whether one key was chosen or several, an empty selection contributing nothing rather than an empty array. It picks one key unless multiple is declared, as a ful-select does.

Attributes

attribute type meaning
name string The field name the surrounding form submits the selection under.
loader string The registered component name the select loads its vocabulary through; loaders:select when absent.
k-type string How a key coerces when it arrives from the response or from the value attribute: number, string or boolean.
mode string chunked asks the endpoint per query instead of fetching the vocabulary once, for a list too large to hold.
preload boolean Fetches the vocabulary while the element upgrades rather than on first use. The field paints immediately either way; the options arrive when they arrive.
revision string Caches the fetched vocabulary in local storage under this revision; a load under a different one is a miss that evicts the entry. It is the cache's namespace, so a vocabulary that differs per user wants the principal in it. Left valueless, the revision the registry's 'revision' component answers is used, so a page states its build once instead of every element repeating it.
k-expr string The expression yielding an option's key, evaluated against each row of the response. Set it together with l-expr to shape a response without a mapper component.
l-expr string The expression yielding an option's label, evaluated against each row of the response.
d-expr string The expression yielding the rows from the response body; the body itself when absent.
m-expr string The expression yielding an option's metadata, evaluated against each row; the whole row when absent.
response-mapper string The registered component name that turns a response into { key, label, metadata } entries. The k-expr/l-expr pair takes precedence; without either, the response is read as positional rows.
operator string A fixed operator sent in front of the chosen keys, for the field a compare reads rather than a set: absent the value is the bare array an InEnum or an InList takes, present it is [operator, ...keys]. No menu is rendered either way, the operator being the author naming the server's comparison rather than a choice offered to whoever is filtering. The criterion reports it, so a chip can show it.
disabled boolean The field's own disabled claim: the control is disabled and the field is left out of the submitted values, composed with a disabled fieldset ancestry. The property reflects the claim only, matches(':disabled') tells the effective state.
readonly boolean Renders the control but does not let it be edited. A readonly field still contributes its value to the form.
required boolean Marks the field as required for assistive technologies and shows the required marker on its label.
value string Comma separated list of the selected keys. Empty contributes nothing, so the table drops the filter rather than sending an empty set.
multiple boolean Always on for this element: a set of one is still a set, and a single selection would answer a bare key where the filter request wants an array.
item-list boolean Shows the selection as a ful-item-list under the control. For a multiple select the list replaces the ful-badge chips, which it hides; a single select keeps its label in the field as well.
src string The url the vocabulary is fetched from. Without it the slotted elements are the whole vocabulary, held in memory. Stays live: writing it builds the loader again and reloads as reload() does, dropping a selected key the new vocabulary does not know.
method string The method the vocabulary is fetched with; POST when absent. Stays live, as src does.

Slots

slot content
(default) The label of the field.
info Extra content rendered next to the label, for a hint or a help icon.
before An addon rendered inside the input group, before the control.
after An addon rendered inside the input group, after the control.
dropdown Replaces the template used to render the options.

Events

event detail
change Fired with the selected keys, or undefined when nothing is picked.

Disclosures

<ful-tooltip>

An info affordance: a themed icon button toggling a small popover with a short explanation, opened by click and by keyboard like a button, dismissed by Escape or an outside click. placement picks the side the note sits on: top (default), bottom, left or right.

Attributes

attribute type meaning
placement string Which side of the trigger the note opens on: top (the default), bottom, left or right. Above by default because a note opening downwards covers the control the marker explains. The library places the note itself on every platform, so the side is the same everywhere.
icon string The ful-icon the marker shows, for a tooltip meaning something other than plain information. Defaults to the page's Tooltip.config.icon; a name the library does not paint is declared by the page as ful-icon[name='...'] { mask-image: ... }.
describes boolean For a tooltip standing in a field: the note joins the accessible description of that field's control, announced on reaching the field rather than only on opening the marker, and the marker leaves the tab order so a form of hinted fields costs no extra keystrokes to walk. The marker stays clickable, and keeps its tab stop wherever nothing took the note.

Slots

slot content
(default) The short explanation shown in the popover.

<ful-dialog>

A modal dialog on the native platform: header, body and buttons, the header attribute naming its heading, opened by any element carrying dialog-target set to its id, or programmatically through open()/ask(), which answer with how the dialog ended, or through update(callback), which opens it on a loading state and then shows either what the callback delivered or the problems of a rejection. dismiss(reason) dismisses it as the close button would, refusable and guarded alike, answering whether it closed. Longer explanations belong here, shorter ones in ful-tooltip. Dialog.ask(header, body, buttons) and Dialog.confirm(header, body, labels) ask a question in a transient one, building, showing, answering and removing the element themselves; a confirm's cancel, close and Escape all answer the negative.

Attributes

attribute type meaning
header string The dialog's title, shown in its header. Text only; slot content into the body instead for anything richer.
requires-answer boolean For the dialog that must be answered: the close button is not rendered and Escape is refused, so the only way out is a button carrying a result. Both, since a close button withheld while Escape still worked would be decoration rather than a rule.
close-on-submit boolean For the dialog whose answer is a form succeeding rather than a button being pressed: its own form submitting successfully closes it and answers with the response. Opt in, and its own form only, a ful-form the body holds directly, since a ful-table wraps its filters in a form of its own and searching one is not the dialog being answered. Such a dialog renders no acknowledge button of its own, the form's submit being its answer.
guard-dismiss boolean For the dialog holding a form the user edits: a dismissal nobody refused, while a ful-form of the dialog under track-changes holds edits not saved yet, first asks the user through Dialog.confirm whether to close and drop them, with the localized dialog.discard texts. Gestures and dismiss() are asked about; close(), a data-result button, close-on-submit and update() are answers or the page deciding, and ask nothing. A second Escape with no interaction in between closes it whatever the user would answer.

Slots

slot content
header Content beside the title and before it: an icon, a badge, a status. It sits outside the heading rather than in it, the header attribute setting the heading through text.
(default) The dialog body.
buttons Buttons closing the dialog; each carries a data-result that the answer carries back. Without this slot a localized acknowledge button is shown. A dialog closing on its form renders none either way, so the slot is for buttons beside the form, not for suppressing one.

Events

event detail
close Fired when the dialog closes, carrying how it ended: dismissed tells a cancel from an answer, result the data-result of the button that closed it, response what a submit answered with. ask() and open() resolve with the same object, and a dialog leaving the document while open answers its waiters with a dismissal.
section:requested Fired by the disclosure when it opens (bubbling): answer through AsyncEvents.asyncOn with the body's delivery; the open awaits the answers under the loading chrome, and a failed delivery paints the body's problems.
dialog:dismiss Fired before the close button, Escape, a backdrop click or dismiss(reason) closes the dialog, with detail.reason (button, escape, backdrop or the one dismiss() was given): cancelable, so preventDefault() keeps it open. Not fired for a data-result button, close-on-submit or close(). A second Escape with no interaction in between closes the dialog whatever the page does, and its dialog:dismiss is then not cancelable.

<ful-drawer>

A side panel drawer on the native dialog platform: a header with its title (the header attribute, or update()'s own) and close button, and a body that shows the slotted content or, under update(header, callback), opens in a loading state and then shows either the content the callback delivered or the error a rejecting callback carries. placement picks the side, end by default, start its mirror. open()/ask() answer with how the drawer ended, as a ful-dialog's do, an ask() on a drawer update() opened waiting for that opening's ending; dismiss(reason) dismisses it as the close button would, refusable and guarded alike, answering whether it closed. Any element carrying dialog-target set to its id opens it too.

Attributes

attribute type meaning
header string The drawer's title, shown in its header. Text only, and also what update() re-titles the panel with.
placement string Which edge the panel slides in from: end (the default) or start, following the page's writing direction.
close-on-submit boolean For the drawer whose ending is a form succeeding rather than its close button being pressed: the form its content holds directly submitting successfully closes it, the close event carrying the response. Opt in, and its own form only, since a ful-table wraps its filters in a form of its own and searching one is not the drawer finishing.
guard-dismiss boolean For the drawer holding a form the user edits: a dismissal nobody refused, while a ful-form of the drawer under track-changes holds edits not saved yet, first asks the user through Dialog.confirm whether to close and drop them, with the localized dialog.discard texts. Gestures and dismiss() are asked about; close(), a data-result button, close-on-submit and update() are answers or the page deciding, and ask nothing. A second Escape with no interaction in between closes it whatever the user would answer.

Slots

slot content
header Content beside the title and before it: an icon, a badge, a status. It sits outside the heading rather than in it, update() setting the title through textContent and taking anything nested there with it.
(default) The drawer body, shown when update() never replaced it.

Events

event detail
close Fired when the drawer closes, carrying how it ended, the same object a ful-dialog answers with: dismissed tells the close button and Escape from an answer, result the data-result of the button, or the argument of close(result), that closed it, and response what a submit answered with under close-on-submit, a save answering with no body at all being a save all the same. ask() and open() resolve with the same object, and a drawer leaving the document while open answers its waiters with a dismissal.
section:requested Fired by the disclosure when it opens (bubbling): answer through AsyncEvents.asyncOn with the body's delivery; the open awaits the answers under the loading chrome, and a failed delivery paints the body's problems.
drawer:dismiss Fired before the close button, Escape, a backdrop click or dismiss(reason) closes the drawer, with detail.reason (button, escape, backdrop or the one dismiss() was given): cancelable, so preventDefault() keeps it open. Not fired for a data-result button, close-on-submit or close(). A second Escape with no interaction in between closes the drawer at once, and its drawer:dismiss is then not cancelable.

<ful-menu>

A menu of commands on the native popover platform: the invoker named by for toggles it, or, without for, one menu serves many invokers and showFor(invoker) opens it beside the one it is for. Light dismiss and Escape come from the browser, and the element adds the menu semantics and the keyboard protocol (roving focus with the arrows, Home and End, type-ahead, Enter and Space to activate, Escape and every close handing the focus back to the invoker). The items are the buttons and links written inside it, kept as they are and given their menuitem role; activation is the item's own click, which the menu only follows by closing.

Attributes

attribute type meaning
for string The id of the invoker the menu belongs to: it toggles the menu, carries aria-haspopup and aria-expanded, and takes the focus back when the menu closes. Read once at the upgrade, so the invoker must already be in the page by then. Without it the menu is shared, opened by showFor(invoker).

<ful-toasts>

A transient feedback region, one per page: each show() (or a show-toast document event carrying the same detail) appends a toast that dismisses itself after its timeout, the element's timeout attribute or five seconds by default, and carries its own dismiss button. severity picks the theme and the announcement, info by default, success, warning and error, the error one announced as an alert; a Failure message shows its problems' reasons. The timer holds while the toast is hovered or holds the focus, and action: { label, onClick } renders a button beside the message whose click answers and retires the toast, the same option travelling in the event detail.

Attributes

attribute type meaning
timeout number How long a toast stands before it retires, in milliseconds; 5000 when absent. A show() may override it per toast.

Navigation

<ful-tabs>

A tab panel: one visible panel at a time, announced through the tab pattern (a tablist of tab buttons, each panel a tabpanel named by its tab, the arrows and Home/End walking the tabs with automatic activation). The tabs are declared as tab elements in the tabs slot, the panels as the slotless children, paired in order; the chrome anchors on the ful-tablist style-only tag, so a subclass or foreign markup built from it keeps the look.

Attributes

attribute type meaning
active number The index of the visible panel, zero based, reflected as the active attribute. Clicks, the arrow keys and the property all move it, each move answering with a tabs:change event.

Slots

slot content
tabs The tab declarations, one tab element per panel, carrying the tab's label.
(default) The panels, one element per declared tab, paired in order: each becomes a tabpanel announced by its tab.

Events

event detail
tabs:change Fired with the active index and the previous one whenever the visible panel moves. A name of its own rather than the fields' change: the panels are the host's children, so every native change of a field inside them bubbles through the host under that name.
section:requested Fired by the component when one of its sections is entered (bubbling): the generic type of the family, joined by section:requested:#index and by section:requested:name when the section carries a data-step. Answer through AsyncEvents.asyncOn with the section's delivery; the component awaits the answers under its loading chrome, and a failed delivery paints the section's problems.

<ful-accordion>

An accordion over native details/summary disclosures: the platform carries the semantics, the keyboard and the toggling, the chrome paints the group (anchored on the ful-accordion-group style-only tag). With the exclusive claim the render assigns one shared name to every panel, which is the platform's own exclusive grouping: opening one closes the others.

Attributes

attribute type meaning
exclusive boolean When present, opening a panel closes the others: the native details name grouping, assigned (and assignable again) by the render.

Slots

slot content
(default) The native details/summary disclosures, one per panel, rendered inside the group.

<ful-wizard>

A wizard: a progress of steps over one-of-N sections. The steps are declared as step elements in the steps slot, the sections as the slotless children, paired in order; each section may carry a data-step name, which is what move() answers to, next() and prev() walk the neighbors, and the current step is the aria-current=step claim carried in lockstep by the step and its section, so the chrome, including which section is shown, follows the claim alone. Each move answers with a wizard:change event.

Attributes

attribute type meaning
progress string picks the progress chrome's shape over the same claims: the default shows the current step alone (any counter or dressing is the page's own), timeline the full timeline, dots a done/current/future strip, none leaves the chrome to the page.

Slots

slot content
steps The step declarations, one step element per section, carrying the step's label.
(default) The sections, one per declared step: only the current one is shown, and each may carry a data-step name for move().

Events

event detail
wizard:change Fired with the index and the data-step name after next(), prev() or move() land on a different step. Named apart from change so the bubbling change of a field inside a step never reaches its listeners.
section:requested Fired by the component when one of its sections is entered (bubbling): the generic type of the family, joined by section:requested:#index and by section:requested:name when the section carries a data-step. Answer through AsyncEvents.asyncOn with the section's delivery; the component awaits the answers under its loading chrome, and a failed delivery paints the section's problems.

fml

ftl

httpc

ful

Extending

Reference

Project

Clone this wiki locally