Skip to content

24 Element reference

Jump to bottom
Roberto Ferranti edited this page Sep 14, 2026 · 28 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.

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.
submit:success Fired with the submitted values and the mapped response.
submit:failure Fired with the exception when the submit fails. The form does not rethrow.

Fields

<ful-input>

A labelled text input. Use type to pick any native input type, 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, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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 bool.
src string The url the vocabulary is fetched from. Without it the slotted elements are the whole vocabulary, held in memory.
method string The method the vocabulary is fetched with; POST when absent.
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.
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.
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 as well, in addition to the field itself (the label for a single select, the ful-badge chips when multiple).

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. 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, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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(). 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.

Slots

slot content
filters Fields wrapped in a ful-form, submitted to filter the table.
caption The caption of the table.
footer Content rendered in the table footer.

<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. A multiple ful-select used as a filter emits the bare value array the in-list annotations expect.

Attributes

attribute type meaning
type string Any native input type, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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, or the literal textarea to render one. 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 the characters that survive a keystroke, so keep="[0-9]" is digits only. It matches rather than negating, so it takes a pattern and not only a character class.
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.
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.

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: bottom (default), top, left or right.

Attributes

attribute type meaning
placement string Which side of the trigger the note opens on: bottom (the default), top, start or end. The library places the note itself on every platform, so the side is the same everywhere.

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 resolve with the data-result of the button that closed the dialog (null on Escape). Longer explanations belong here, shorter ones in ful-tooltip.

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.

Slots

slot content
(default) The dialog body.
buttons Buttons closing the dialog; each carries a data-result that ask() resolves with. Without this slot a localized acknowledge button is shown.

Events

event detail
close Fired when the dialog closes, carrying the data-result of the button that closed it, or null on Escape; ask() and open() resolve with the same answer, and a dialog leaving the document while open answers its waiters with null.
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.

<ful-drawer>

A side panel drawer on the native dialog platform: a header with its title (the title attribute, or update()'s own) and close button, and a body that opens in a loading state, then shows either the content delivered by update(title, callback) (or the slotted one, when it is never updated) or the error a rejecting callback carries. placement picks the side, end by default, start its mirror. Any element carrying dialog-target set to its id opens it too.

Attributes

attribute type meaning
title 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.

Slots

slot content
(default) The drawer body, shown when update() never replaced it.

Events

event detail
close Fired when the drawer closes, by its close button or Escape.
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.

<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.

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 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
change Fired with the active index and the previous one whenever the visible panel moves.
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 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
change Fired with the index and the data-step name after next(), prev() or move() land on a different step.
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