lustre/attribute · lustre

abbr

pub fn abbr(value: String) -> @internal Attribute(msg)

A short, abbreviated description of the header cell’s content provided as an alternative label to use for the header cell when referencing the cell in other contexts. Some user-agents, such as speech readers, may present this description before the content itself.

accept

</>

pub fn accept(values: List(String)) -> @internal Attribute(msg)

A hint for the user agent about what file types are expected to be submitted. The following values are accepted:

Value	Description
“audio/*”	Any audio file type.
“video/*”	Any video file type.
“image/*”	Any image file type.
mime/type	A complete MIME type, without additional parameters.
.ext	Indicates any file with the given extension.

The following input types support the "accept" attribute:

"file"

Note: the "accept" attribute is a hint to the user agent and does not guarantee that the user will only be able to select files of the specified type.

accept_charset

</>

pub fn accept_charset(
  charsets: String,
) -> @internal Attribute(msg)

Specifies the character encodings to be used for form submission. This allows servers to know how to interpret the form data. Multiple encodings can be specified as a space-separated list.

accesskey

</>

pub fn accesskey(key: String) -> @internal Attribute(msg)

Defines a shortcut key to activate or focus the element. Multiple options may be provided as a set of space-separated characters that are exactly one code point each.

The way to activate the access key depends on the browser and its platform:

	Windows	Linux	Mac OS
Firefox	Alt + Shift + key	Alt + Shift + key	Ctrl + Option + key
Chrome	Alt + key	Ctrl + Option + key	Ctrl + Option + key
Safari			Ctrl + Option + key

action

</>

pub fn action(url: String) -> @internal Attribute(msg)

Specifies the URL to which the form’s data should be sent when submitted. This can be overridden by formaction attributes on submit buttons.

alpha

</>

pub fn alpha(allowed: Bool) -> @internal Attribute(msg)

Allow a colour’s alpha component to be manipulated, allowing the user to select a colour with transparency.

The following input types support the "alpha" attribute:

"color"

alt

</>

pub fn alt(text: String) -> @internal Attribute(msg)

Specifies text that should be displayed when the image cannot be rendered. This attribute is essential for accessibility, providing context about the image to users who cannot see it, including those using screen readers.

aria

</>

pub fn aria(
  name: String,
  value: String,
) -> @internal Attribute(msg)

Add an aria-* attribute to an HTML element. The key will be prefixed by aria-.

aria_activedescendant

</>

pub fn aria_activedescendant(
  id: String,
) -> @internal Attribute(msg)

The aria-activedescendant attribute identifies the currently active element when focus is on a composite widget, combobox, textbox, group, or application.

aria_atomic

</>

pub fn aria_atomic(value: Bool) -> @internal Attribute(msg)

In ARIA live regions, the global aria-atomic attribute indicates whether assistive technologies such as a screen reader will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

aria_autocomplete

</>

pub fn aria_autocomplete(
  value: String,
) -> @internal Attribute(msg)

The aria-autocomplete attribute indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for a combobox, searchbox, or textbox and specifies how predictions will be presented if they are made.

aria_braillelabel

</>

pub fn aria_braillelabel(
  value: String,
) -> @internal Attribute(msg)

The global aria-braillelabel property defines a string value that labels the current element, which is intended to be converted into Braille.

aria_brailleroledescription

</>

pub fn aria_brailleroledescription(
  value: String,
) -> @internal Attribute(msg)

The global aria-brailleroledescription attribute defines a human-readable, author-localized abbreviated description for the role of an element intended to be converted into Braille.

aria_busy

</>

pub fn aria_busy(value: Bool) -> @internal Attribute(msg)

Used in ARIA live regions, the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.

aria_checked

</>

pub fn aria_checked(value: String) -> @internal Attribute(msg)

The aria-checked attribute indicates the current “checked” state of checkboxes, radio buttons, and other widgets.

aria_colcount

</>

pub fn aria_colcount(value: Int) -> @internal Attribute(msg)

The aria-colcount attribute defines the total number of columns in a table, grid, or treegrid when not all columns are present in the DOM.

aria_colindex

</>

pub fn aria_colindex(value: Int) -> @internal Attribute(msg)

The aria-colindex attribute defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid.

aria_colindextext

</>

pub fn aria_colindextext(
  value: String,
) -> @internal Attribute(msg)

The aria-colindextext attribute defines a human-readable text alternative of the numeric aria-colindex.

aria_colspan

</>

pub fn aria_colspan(value: Int) -> @internal Attribute(msg)

The aria-colspan attribute defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

aria_controls

</>

pub fn aria_controls(value: String) -> @internal Attribute(msg)

The global aria-controls property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.

aria_current

</>

pub fn aria_current(value: String) -> @internal Attribute(msg)

A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.

aria_describedby

</>

pub fn aria_describedby(
  value: String,
) -> @internal Attribute(msg)

The global aria-describedby attribute identifies the element (or elements) that describes the element on which the attribute is set.

aria_description

</>

pub fn aria_description(
  value: String,
) -> @internal Attribute(msg)

The global aria-description attribute defines a string value that describes or annotates the current element.

aria_details

</>

pub fn aria_details(value: String) -> @internal Attribute(msg)

The global aria-details attribute identifies the element (or elements) that provide additional information related to the object.

aria_disabled

</>

pub fn aria_disabled(value: Bool) -> @internal Attribute(msg)

The aria-disabled state indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

aria_errormessage

</>

pub fn aria_errormessage(
  value: String,
) -> @internal Attribute(msg)

The aria-errormessage attribute on an object identifies the element that provides an error message for that object.

aria_expanded

</>

pub fn aria_expanded(value: Bool) -> @internal Attribute(msg)

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.

aria_flowto

</>

pub fn aria_flowto(value: String) -> @internal Attribute(msg)

The global aria-flowto attribute identifies the next element (or elements) in an alternate reading order of content. This allows assistive technology to override the general default of reading in document source order at the user’s discretion.

aria_haspopup

</>

pub fn aria_haspopup(value: String) -> @internal Attribute(msg)

The aria-haspopup attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

aria_hidden

</>

pub fn aria_hidden(value: Bool) -> @internal Attribute(msg)

The aria-hidden state indicates whether the element is exposed to an accessibility API.

aria_invalid

</>

pub fn aria_invalid(value: String) -> @internal Attribute(msg)

The aria-invalid state indicates the entered value does not conform to the format expected by the application.

aria_keyshortcuts

</>

pub fn aria_keyshortcuts(
  value: String,
) -> @internal Attribute(msg)

The global aria-keyshortcuts attribute indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria_label

</>

pub fn aria_label(value: String) -> @internal Attribute(msg)

The aria-label attribute defines a string value that can be used to name an element, as long as the element’s role does not prohibit naming.

aria_labelledby

</>

pub fn aria_labelledby(value: String) -> @internal Attribute(msg)

The aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to.

aria_level

</>

pub fn aria_level(value: Int) -> @internal Attribute(msg)

The aria-level attribute defines the hierarchical level of an element within a structure.

aria_live

</>

pub fn aria_live(value: String) -> @internal Attribute(msg)

The global aria-live attribute indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

aria_modal

</>

pub fn aria_modal(value: Bool) -> @internal Attribute(msg)

The aria-modal attribute indicates whether an element is modal when displayed.

aria_multiline

</>

pub fn aria_multiline(value: Bool) -> @internal Attribute(msg)

The aria-multiline attribute indicates whether a textbox accepts multiple lines of input or only a single line.

aria_multiselectable

</>

pub fn aria_multiselectable(
  value: Bool,
) -> @internal Attribute(msg)

The aria-multiselectable attribute indicates that the user may select more than one item from the current selectable descendants.

aria_orientation

</>

pub fn aria_orientation(
  value: String,
) -> @internal Attribute(msg)

The aria-orientation attribute indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous.

aria_owns

</>

pub fn aria_owns(value: String) -> @internal Attribute(msg)

The aria-owns attribute identifies an element (or elements) in order to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship.

aria_placeholder

</>

pub fn aria_placeholder(
  value: String,
) -> @internal Attribute(msg)

The aria-placeholder attribute defines a short hint (a word or short phrase) intended to help the user with data entry when a form control has no value. The hint can be a sample value or a brief description of the expected format.

aria_posinset

</>

pub fn aria_posinset(value: Int) -> @internal Attribute(msg)

The aria-posinset attribute defines an element’s number or position in the current set of listitems or treeitems when not all items are present in the DOM.

aria_pressed

</>

pub fn aria_pressed(value: String) -> @internal Attribute(msg)

The aria-pressed attribute indicates the current “pressed” state of a toggle button.

aria_readonly

</>

pub fn aria_readonly(value: Bool) -> @internal Attribute(msg)

The aria-readonly attribute indicates that the element is not editable, but is otherwise operable.

aria_relevant

</>

pub fn aria_relevant(value: String) -> @internal Attribute(msg)

Used in ARIA live regions, the global aria-relevant attribute indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

aria_required

</>

pub fn aria_required(value: Bool) -> @internal Attribute(msg)

The aria-required attribute indicates that user input is required on the element before a form may be submitted.

aria_roledescription

</>

pub fn aria_roledescription(
  value: String,
) -> @internal Attribute(msg)

The aria-roledescription attribute defines a human-readable, author-localised description for the role of an element.

aria_rowcount

</>

pub fn aria_rowcount(value: Int) -> @internal Attribute(msg)

The aria-rowcount attribute defines the total number of rows in a table, grid, or treegrid.

aria_rowindex

</>

pub fn aria_rowindex(value: Int) -> @internal Attribute(msg)

The aria-rowindex attribute defines an element’s position with respect to the total number of rows within a table, grid, or treegrid.

aria_rowindextext

</>

pub fn aria_rowindextext(
  value: String,
) -> @internal Attribute(msg)

The aria-rowindextext attribute defines a human-readable text alternative of aria-rowindex.

aria_rowspan

</>

pub fn aria_rowspan(value: Int) -> @internal Attribute(msg)

The aria-rowspan attribute defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

aria_selected

</>

pub fn aria_selected(value: Bool) -> @internal Attribute(msg)

The aria-selected attribute indicates the current “selected” state of various widgets.

aria_setsize

</>

pub fn aria_setsize(value: Int) -> @internal Attribute(msg)

The aria-setsize attribute defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM.

aria_sort

</>

pub fn aria_sort(value: String) -> @internal Attribute(msg)

The aria-sort attribute indicates if items in a table or grid are sorted in ascending or descending order.

aria_valuemax

</>

pub fn aria_valuemax(value: String) -> @internal Attribute(msg)

The aria-valuemax attribute defines the maximum allowed value for a range widget.

aria_valuemin

</>

pub fn aria_valuemin(value: String) -> @internal Attribute(msg)

The aria-valuemin attribute defines the minimum allowed value for a range widget.

aria_valuenow

</>

pub fn aria_valuenow(value: String) -> @internal Attribute(msg)

The aria-valuenow attribute defines the current value for a range widget.

aria_valuetext

</>

pub fn aria_valuetext(value: String) -> @internal Attribute(msg)

The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.

attribute

</>

pub fn attribute(
  name: String,
  value: String,
) -> @internal Attribute(msg)

Create an HTML attribute. This is like saying element.setAttribute("class", "wibble") in JavaScript. Attributes will be rendered when calling element.to_string.

Note: there is a subtle difference between attributes and properties. You can read more about the implications of this here.

autocapitalize

</>

pub fn autocapitalize(value: String) -> @internal Attribute(msg)

Controls whether text input is automatically capitalised. The following values are accepted:

Value	Mode
“”	default
“none”	none
“off”
“sentences”	sentences
“on”
“words”	words
“characters”	characters

The autocapitalisation processing model is based on the following five modes:

default: The user agent and input method should make their own determination of whether or not to enable autocapitalization.
none: No autocapitalisation should be applied (all letters should default to lowercase).
sentences: The first letter of each sentence should default to a capital letter; all other letters should default to lowercase.
words: The first letter of each word should default to a capital letter; all other letters should default to lowercase.
characters: All letters should default to uppercase.

autocomplete

</>

pub fn autocomplete(value: String) -> @internal Attribute(msg)

A hint for the user agent to automatically fill the value of the input with an appropriate value. The format for the "autocomplete" attribute is a space-separated ordered list of optional tokens:

"section-* (shipping | billing) [...fields] webauthn"

section-*: used to disambiguate between two fields with otherwise identical autocomplete values. The * is replaced with a string that identifies the section of the form.
shipping | billing: indicates the field is related to shipping or billing address or contact information.
[...fields]: a space-separated list of field names that are relevant to the input, for example "email", "name family-name", or "home tel".
webauthn: indicates the field can be automatically filled with a WebAuthn passkey.

In addition, the value may instead be "off" to disable autocomplete for the input, or "on" to let the user agent decide based on context what values are appropriate.

The following input types support the "autocomplete" attribute:

"color"
"date"
"datetime-local"
"email"
"hidden"
"month"
"number"
"password"
"range"
"search"
"tel"
"text"
"time"
"url"
"week"

autocorrect

</>

pub fn autocorrect(enabled: Bool) -> @internal Attribute(msg)

Controls whether the user agent may automatically correct mispelled words while typing. Whether or not spelling is corrected is left up to the user agent and may also depend on the user’s settings.

When disabled the user agent is never allowed to correct spelling.

autofocus

</>

pub fn autofocus(
  should_autofocus: Bool,
) -> @internal Attribute(msg)

For server-rendered HTML, this attribute controls whether an element should be focused when the page first loads.

Note: Lustre’s runtime augments that native behaviour of this attribute. Whenever it is toggled true, the element will be automatically focused even if it already exists in the DOM.

autoplay

</>

pub fn autoplay(auto_play: Bool) -> @internal Attribute(msg)

Indicates that the media resource should automatically begin playing as soon as it can do so without stopping. When not present, the media will not automatically play until the user initiates playback.

Note: Lustre’s runtime augments this attribute. Whenever it is toggled to true, the media will begin playing as if the element’s play() method was called.

charset

</>

pub fn charset(value: String) -> @internal Attribute(msg)

Declares the character encoding used in the document. When used with a meta element, this replaces the need for the http_equiv("content-type") attribute.

checked

</>

pub fn checked(is_checked: Bool) -> @internal Attribute(msg)

Whether the control is checked or not. When participating in a form, the value of the input is included in the form submission if it is checked. For checkboxes that do not have a value, the value of the input is "on" when checked.

The following input types support the "checked" attribute:

"checkbox"
"radio"

class

</>

pub fn class(name: String) -> @internal Attribute(msg)

A class is a non-unique identifier for an element primarily used for styling purposes. You can provide multiple classes as a space-separated list and any style rules that apply to any of the classes will be applied to the element.

To conditionally toggle classes on and off, you can use the classes function instead.

Note: unlike most attributes, multiple class attributes are merged with any existing other classes on an element. Classes added later in the list will override classes added earlier.

classes

</>

pub fn classes(
  names: List(#(String, Bool)),
) -> @internal Attribute(msg)

A class is a non-unique identifier for an element primarily used for styling purposes. You can provide multiple classes as a space-separated list and any style rules that apply to any of the classes will be applied to the element. This function allows you to conditionally toggle classes on and off.

Note: unlike most attributes, multiple class attributes are merged with any existing other classes on an element. Classes added later in the list will override classes added earlier.

colorspace

</>

pub fn colorspace(value: String) -> @internal Attribute(msg)

The color space of the serialised CSS color. It also hints to user agents about what kind of interface to present to the user for selecting a color. The following values are accepted:

"limited-srgb": The CSS color is converted to the ‘srgb’ color space and limited to 8-bits per component, e.g., "#123456" or "color(srgb 0 1 0 / 0.5)".
"display-p3": The CSS color is converted to the ‘display-p3’ color space, e.g., "color(display-p3 1.84 -0.19 0.72 / 0.6)".

The following input types support the "colorspace" attribute:

"color"

colspan

</>

pub fn colspan(value: Int) -> @internal Attribute(msg)

A non-negative integer value indicating how many columns the header cell spans or extends. The default value is 1. User agents dismiss values higher than 1000 as incorrect, defaulting such values to 1.

content

</>

pub fn content(value: String) -> @internal Attribute(msg)

Specifies the value of the meta element, which varies depending on the value of the name or http-equiv attribute.

contenteditable

</>

pub fn contenteditable(
  is_editable: String,
) -> @internal Attribute(msg)

Indicates whether the element’s content is editable by the user, allowing them to modify the HTML content directly. The following values are accepted:

Value	Description
“true”	The element is editable.
“”
“false”	The element is not editable.
“plain-text”	The element is editable without rich text formatting.

Note: setting the value to an empty string does not disable this attribute, and is instead equivalent to setting it to "true"!

controls

</>

pub fn controls(show_controls: Bool) -> @internal Attribute(msg)

When present, this attribute shows the browser’s built-in control panel for the media player, giving users control over playback, volume, seeking, and more.

crossorigin

</>

pub fn crossorigin(value: String) -> @internal Attribute(msg)

Configures the CORS (Cross-Origin Resource Sharing) settings for the element. Valid values are “anonymous” and “use-credentials”.

data

</>

pub fn data(
  key: String,
  value: String,
) -> @internal Attribute(msg)

Add a data-* attribute to an HTML element. The key will be prefixed by "data-", and accessible from JavaScript or in Gleam decoders under the path element.dataset.key where key is the key you provide to this function.

decoding

</>

pub fn decoding(value: String) -> @internal Attribute(msg)

Provides a hint about how the image should be decoded. Valid values are “sync”, “async”, and “auto”.

default_value

</>

pub fn default_value(
  control_value: String,
) -> @internal Attribute(msg)

Set the default value of an input or form control. This is the value that will be shown to users when the input is first rendered and included in the form submission if the user does not change it.

Just setting a default value and letting the DOM manage the state of an input is known as using _uncontrolled inputs. Doing this means your application cannot set the value of an input after it is modified without using an effect.

dir

</>

pub fn dir(direction: String) -> @internal Attribute(msg)

Specifies the text direction of the element’s content. The following values are accepted:

Value	Description
“ltr”	The element’s content is left-to-right.
“rtl”	The element’s content is right-to-left.
“auto”	The element’s content direction is determined by the content itself.

Note: the "auto" value should only be used as a last resort in cases where the content’s direction is truly unknown. The heuristic used by browsers is naive and only considers the first character available that indicates the direction.

dirname

</>

pub fn dirname(direction: String) -> @internal Attribute(msg)

The name of the field included in a form that indicates the direcionality of the user’s input.

The following input types support the "dirname" attribute:

"email"
"hidden"
"password"
"search"
`“submit”
"tel"
"text"
"url"

disabled

</>

pub fn disabled(is_disabled: Bool) -> @internal Attribute(msg)

Controls whether or not the input is disabled. Disabled inputs are not validated during form submission and are not interactive.

download

</>

pub fn download(filename: String) -> @internal Attribute(msg)

Indicates that the linked resource should be downloaded rather than displayed. When provided with a value, it suggests a filename for the downloaded file.

draggable

</>

pub fn draggable(is_draggable: Bool) -> @internal Attribute(msg)

Indicates whether the element can be dragged as part of the HTML drag-and-drop API.

enctype

</>

pub fn enctype(encoding_type: String) -> @internal Attribute(msg)

Specifies how form data should be encoded before sending it to the server. Valid values include:

Value	Description
“application/x-www-form-urlencoded”	Default encoding (spaces as +, etc.)
“multipart/form-data”	Required for file uploads
“text/plain”	Simple encoding with minimal escaping

enterkeyhint

</>

pub fn enterkeyhint(value: String) -> @internal Attribute(msg)

Specifies what action label (or potentially icon) to present for the “enter” key on virtual keyboards such as mobile devices. The following values are accepted:

Value	Example
“enter”	“return”, “↵”
“done”	“done”, “✅”
“go”	“go”
“next”	“next”
“previous”	“return”
“search”	“search”, “🔍”
“send”	“send”

The examples listed are demonstrative and may not be the actual labels used by user agents. When unspecified or invalid, the user agent may use contextual information such as the type of an input to determine the label.

fetchpriority

</>

pub fn fetchpriority(value: String) -> @internal Attribute(msg)

Sets the priority for fetches initiated by the element. Valid values are “high”, “low”, and “auto”.

for

</>

pub fn for(id: String) -> @internal Attribute(msg)

form

</>

pub fn form(id: String) -> @internal Attribute(msg)

Associates the input with a form element located elsewhere in the document.

formaction

</>

pub fn formaction(url: String) -> @internal Attribute(msg)

The URL to use for form submission. This URL will override the "action" attribute on the form element itself, if present.

The following input types support the "formaction" attribute:

"image"
"submit"

formenctype

</>

pub fn formenctype(
  encoding_type: String,
) -> @internal Attribute(msg)

Entry list encoding type to use for form submission

"image"
"submit"

formmethod

</>

pub fn formmethod(method: String) -> @internal Attribute(msg)

Variant to use for form submission

"image"
"submit"

formnovalidate

</>

pub fn formnovalidate(
  no_validate: Bool,
) -> @internal Attribute(msg)

Bypass form control validation for form submission

"image"
"submit"

formtarget

</>

pub fn formtarget(target: String) -> @internal Attribute(msg)

Navigable for form submission

"image"
"submit"

headers

</>

pub fn headers(ids: List(String)) -> @internal Attribute(msg)

A list of space-separated strings corresponding to the id attributes of the <th> elements that provide the headers for this header cell.

height

</>

pub fn height(value: Int) -> @internal Attribute(msg)

Specifies the height of the element in pixels.

hidden

</>

pub fn hidden(is_hidden: Bool) -> @internal Attribute(msg)

Indicates whether the element is relevant to the page’s current state. A hidden element is not visible to the user and is inaccessible to assistive technologies such as screen readers. This makes it unsuitable for simple presentation purposes, but it can be useful for example to render something that may be made visible later.

href

</>

pub fn href(url: String) -> @internal Attribute(msg)

Specifies the URL of a linked resource. This attribute can be used on various elements to create hyperlinks or to load resources.

hreflang

</>

pub fn hreflang(language: String) -> @internal Attribute(msg)

Specifies the language of the linked resource. The value must be a valid BCP 47 language tag.

http_equiv

</>

pub fn http_equiv(value: String) -> @internal Attribute(msg)

Sets a pragma directive for a document. This is used in meta tags to define behaviors the user agent should follow.

id

</>

pub fn id(value: String) -> @internal Attribute(msg)

The "id" attribute is used to uniquely identify a single element within a document. It can be used to reference the element in CSS with the selector #id, in JavaScript with document.getElementById("id"), or by anchors on the same page with the URL "#id".

inert

</>

pub fn inert(is_inert: Bool) -> @internal Attribute(msg)

Marks the element as inert, meaning it is not currently interactive and does not receive user input. For sighted users, it’s common to style inert elements in a way that makes them visually distinct from active elements, such as by greying them out: this can help avoid confusion for users who may not otherwise know the content they are looking at is inactive.

inputmode

</>

pub fn inputmode(value: String) -> @internal Attribute(msg)

Hints to the user agent about what type of virtual keyboard to display when the user interacts with the element. The following values are accepted:

Value	Description
“none”	No virtual keyboard should be displayed.
“text”	A standard text input keyboard.
“decimal”	A numeric keyboard with locale-appropriate separator.
“numeric”	A numeric keyboard.
“tel”	A telephone keypad including “#” and “*”.
“email”	A keyboard for entering email addresses including “@” and “.”
“url”	A keyboard for entering URLs including “/” and “.”.
“search”	A keyboard for entering search queries should be shown.

The "none" value should only be used in cases where you are rendering a custom input method, otherwise the user will not be able to enter any text!

is

</>

pub fn is(value: String) -> @internal Attribute(msg)

Specifies the customised built-in element to be used in place of the native element this attribute is applied to.

ismap

</>

pub fn ismap(is_map: Bool) -> @internal Attribute(msg)

Indicates that the image is a server-side image map. When a user clicks on the image, the coordinates of the click are sent to the server.

itemid

</>

pub fn itemid(id: String) -> @internal Attribute(msg)

Used as part of the Microdata format to specify the global unique identifier of an item, for example books that are identifiable by their ISBN.

itemprop

</>

pub fn itemprop(name: String) -> @internal Attribute(msg)

Used as part of the Microdata format to specify that the content of the element is to be treated as a value of the given property name.

itemscope

</>

pub fn itemscope(has_scope: Bool) -> @internal Attribute(msg)

Used as part of the Microdata format to indicate that the element and its descendants form a single item of key-value data.

itemtype

</>

pub fn itemtype(url: String) -> @internal Attribute(msg)

Used as part of the Microdata format to specify the type of item being described. This is a URL that points to a schema containing the vocabulary used for an item’s key-value pairs, such as a schema.org type.

lang

</>

pub fn lang(language: String) -> @internal Attribute(msg)

Specifies the language of the element’s content and the language of any of this element’s attributes that contain text. The "lang" attribute applies to the element itself and all of its descendants, unless overridden by another "lang" attribute on a descendant element.

The value must be a valid BCP 47 language tag.

list

</>

pub fn list(id: String) -> @internal Attribute(msg)

List of autocomplete options

The following input types support the "list" attribute:

"color"
"date"
"datetime-local"
"email"
"month"
"number"
"range"
"search"
"tel"
"text"
"time"
"url"
"week"

loading

</>

pub fn loading(value: String) -> @internal Attribute(msg)

Indicates how the browser should load the image. Valid values are “eager” (load immediately) and “lazy” (defer loading until needed).

loop

</>

pub fn loop(should_loop: Bool) -> @internal Attribute(msg)

When present, this attribute indicates that the media should start over again from the beginning when it reaches the end.

max

</>

pub fn max(value: String) -> @internal Attribute(msg)

Constrain the maximum value of a form control. The exact syntax of this value changes depending on the type of input, for example "1", "1979-12-31", and "06:00" are all potentially valid values for the "max" attribute.

The following input types support the "max" attribute:

"date"
"datetime-local"
"month"
"number"
"range"
"time"
"week"

maxlength

</>

pub fn maxlength(length: Int) -> @internal Attribute(msg)

Maximum length of value

The following input types support the "maxlength" attribute:

"email"
"password"
"search"
"tel"
"text"
"url"

media

</>

pub fn media(query: String) -> @internal Attribute(msg)

Specifies the media types the resource applies to. This is commonly used with link elements for stylesheets to determine when they should be loaded.

method

</>

pub fn method(http_method: String) -> @internal Attribute(msg)

Specifies the HTTP method to use when submitting the form. Common values are:

Value	Description
“get”	Appends form data to URL (default)
“post”	Sends form data in the body of the HTTP request
“dialog”	Closes a dialog if the form is inside one

min

</>

pub fn min(value: String) -> @internal Attribute(msg)

Minimum value

The following input types support the "max" attribute:

"date"
"datetime-local"
"month"
"number"
"range"
"time"
"week"

minlength

</>

pub fn minlength(length: Int) -> @internal Attribute(msg)

Minimum length of value

"email"
"password"
"search"
"tel"
"text"
"url"

multiple

</>

pub fn multiple(allow_multiple: Bool) -> @internal Attribute(msg)

Whether an input or select may allow multiple values to be selected at once.

The following input types support the "multiple" attribute:

"email"
"file"

muted

</>

pub fn muted(is_muted: Bool) -> @internal Attribute(msg)

When present, this attribute indicates that the audio output of the media element should be initially silenced.

name

</>

pub fn name(element_name: String) -> @internal Attribute(msg)

Name of the element to use for form submission and in the form.elements API

nonce

</>

pub fn nonce(value: String) -> @internal Attribute(msg)

A cryptographic nonce used by CSP (Content Security Policy) to allow or deny the fetch of a given resource.

none

</>

pub fn none() -> @internal Attribute(msg)

Create an empty attribute. This is not added to the DOM and not rendered when calling element.to_string, but it is useful for conditionally adding attributes to an element.

novalidate

</>

pub fn novalidate(
  disable_validation: Bool,
) -> @internal Attribute(msg)

When present, indicates that the form should not be validated when submitted. This allows submission of forms with invalid or incomplete data.

pattern

</>

pub fn pattern(regex: String) -> @internal Attribute(msg)

Pattern to be matched by the form control’s value

"email"
"password"
"search"
"tel"
"text"
"url"

ping

</>

pub fn ping(urls: List(String)) -> @internal Attribute(msg)

Provides a space-separated list of URLs that will be notified if the user follows the hyperlink. These URLs will receive POST requests with bodies of type ping/1.0.

placeholder

</>

pub fn placeholder(text: String) -> @internal Attribute(msg)

User-visible label to be placed within the form control

"email"
"number"
"password"
"search"
"tel"
"text"
"url"

playsinline

</>

pub fn playsinline(play_inline: Bool) -> @internal Attribute(msg)

Encourages the user agent to display video content within the element’s playback area rather than in a separate window or fullscreen, especially on mobile devices.

This attribute only acts as a hint to the user agent, and setting this to false does not imply that the video will be played in fullscreen.

</>

pub fn popover(value: String) -> @internal Attribute(msg)

Specifies that the element should be treated as a popover, rendering it in the top-layer above all other content when the popover is active. The following values are accepted:

Value	Description
“auto”	Closes other popovers when opened.
“”
“manual”	Does not close other popovers when opened.
“hint”	Closes only other “hint” popovers when opened.

All modes except "manual" support “light dismiss” letting the user close the popover by clicking outside of it, as well as respond to close requests letting the user dismiss a popover by pressing the “escape” key or by using the dismiss gesture on any assistive technology.

Popovers can be triggered either programmatically through the showPopover() method, or by assigning an id to the element and including the popovertarget attribute on the element that should trigger the popover.

popovertarget

</>

pub fn popovertarget(id: String) -> @internal Attribute(msg)

Targets a popover element to toggle, show, or hide

The following input types support the "popovertarget" attribute:

"button"
"image"
"reset"
"submit"

popovertargetaction

</>

pub fn popovertargetaction(
  action: String,
) -> @internal Attribute(msg)

Indicates whether a targeted popover element is to be toggled, shown, or hidden

The following input types support the "popovertarget" attribute:

"button"
"image"
"reset"
"submit"

poster

</>

pub fn poster(url: String) -> @internal Attribute(msg)

Specifies an image to be shown while the video is downloading, or until the user hits the play button.

preload

</>

pub fn preload(value: String) -> @internal Attribute(msg)

Provides a hint to the browser about what the author thinks will lead to the best user experience. The following values are accepted:

Value	Description
“auto”	Let’s the user agent determine the best option
“metadata”	Hints to the user agent that it can fetch the metadata only.
“none”	Hints to the user agent that server traffic should be minimised.

property

</>

pub fn property(
  name: String,
  value: json.Json,
) -> @internal Attribute(msg)

Create a DOM property. This is like saying element.className = "wibble" in JavaScript. Properties will be not be rendered when calling element.to_string.

Note: there is a subtle difference between attributes and properties. You can read more about the implications of this here.

readonly

</>

pub fn readonly(is_readonly: Bool) -> @internal Attribute(msg)

Whether to allow the value to be edited by the user

"date"
"datetime-local"
"email"
"month"
"number"
"password"
"range"
"search"
"tel"
"text"
"time"
"url"
"week"

referrerpolicy

</>

pub fn referrerpolicy(value: String) -> @internal Attribute(msg)

Specifies the referrer policy for fetches initiated by the element. The following values are accepted:

Value	Description
“no-referrer”	No Referer header is sent
“no-referrer-when-downgrade”	Only send Referer for same-origin or more secure
“origin”	Send only the origin part of the URL
“origin-when-cross-origin”	Full URL for same-origin, origin only for cross-origin
“same-origin”	Only send Referer for same-origin requests
“strict-origin”	Like origin, but only to equally secure destinations
“strict-origin-when-cross-origin”	Default policy with varying levels of restriction
“unsafe-url”	Always send the full URL

rel

</>

pub fn rel(value: String) -> @internal Attribute(msg)

Specifies the relationship between the current document and the linked resource. Multiple relationship values can be provided as a space-separated list.

required

</>

pub fn required(is_required: Bool) -> @internal Attribute(msg)

Whether the control is required for form submission

"checkbox"
"date"
"datetime-local"
"email"
"month"
"number"
"password"
"radio"
"range"
"search"
"tel"
"text"
"time"
"url"
"week"

role

</>

pub fn role(name: String) -> @internal Attribute(msg)

rowspan

</>

pub fn rowspan(value: Int) -> @internal Attribute(msg)

A non-negative integer value indicating how many rows the header cell spans or extends. The default value is 1; if its value is set to 0, the header cell will extends to the end of the table grouping section, that the <th> belongs to. Values higher than 65534 are clipped at 65534.

scope

</>

pub fn scope(value: String) -> @internal Attribute(msg)

The scope attribute specifies whether a header cell is a header for a row, column, or group of rows or columns. The following values are accepted:

The scope attribute is only valid on <th> elements.

selected

</>

pub fn selected(is_selected: Bool) -> @internal Attribute(msg)

Controls whether or not a select’s <option> is selected or not. Only one option can be selected at a time, unless the "multiple" attribute is set on the select element.

shadowrootclonable

</>

pub fn shadowrootclonable(
  clonable: Bool,
) -> @internal Attribute(msg)

Determines whether the shadow root can be cloned when the host element is cloned.

shadowrootdelegatesfocus

</>

pub fn shadowrootdelegatesfocus(
  delegates: Bool,
) -> @internal Attribute(msg)

Indicates whether focus should be delegated to the shadow root when an element in the shadow tree gains focus.

shadowrootmode

</>

pub fn shadowrootmode(mode: String) -> @internal Attribute(msg)

Specifies the mode for creating a shadow root on a template. Valid values include:

Value	Description
“open”	Shadow root’s contents are accessible
“closed”	Shadow root’s contents are not accessible

Note: if you are pre-rendering a Lustre component you must make sure this attribute matches the open_shadow_root configuration - or "closed" if not explicitly set - to ensure the shadow root is created correctly.

shadowrootserializable

</>

pub fn shadowrootserializable(
  serializable: Bool,
) -> @internal Attribute(msg)

Controls whether the shadow root should be preserved during serialization operations like copying to the clipboard or saving a page.

size

</>

pub fn size(value: String) -> @internal Attribute(msg)

Size of the control

The following input types support the size attribute:

"email"
"password"
"search"
"tel"
"text"
"url"

sizes

</>

pub fn sizes(value: String) -> @internal Attribute(msg)

Used with srcset to define the size of images in different layout scenarios. Helps the browser select the most appropriate image source.

span

</>

pub fn span(value: Int) -> @internal Attribute(msg)

Specifies the number of consecutive columns a <colgroup> element spans. The value must be a positive integer greater than zero.

spellcheck

</>

pub fn spellcheck(should_check: Bool) -> @internal Attribute(msg)

Indicates whether the element’s content should be checked for spelling errors. This typically only applies to inputs and textareas, or elements that are contenteditable.

src

</>

pub fn src(url: String) -> @internal Attribute(msg)

Specifies the URL of an image or resource to be used.

srcset

</>

pub fn srcset(sources: String) -> @internal Attribute(msg)

Specifies a set of image sources for different display scenarios. This allows browsers to choose the most appropriate image based on factors like screen resolution and viewport size.

step

</>

pub fn step(value: String) -> @internal Attribute(msg)

Granularity to be matched by the form control’s value

The following input types support the "step" attribute:

"date"
"datetime-local"
"month"
"number"
"range"
"time"
"week"

style

</>

pub fn style(
  property: String,
  value: String,
) -> @internal Attribute(msg)

Provide a single property name and value to be used as inline styles for the element. If either the property name or value is empty, this attribute will be ignored.

Note: unlike most attributes, multiple style attributes are merged with any existing other styles on an element. Styles added later in the list will override styles added earlier.

styles

</>

pub fn styles(
  properties: List(#(String, String)),
) -> @internal Attribute(msg)

Provide a list of property-value pairs to be used as inline styles for the element. Empty properties or values are omitted from the final style string.

Note: unlike most attributes, multiple styles attributes are merged with any existing other styles on an element. Styles added later in the list will override styles added earlier.

tabindex

</>

pub fn tabindex(index: Int) -> @internal Attribute(msg)

Specifies the tabbing order of the element. If an element is not typically focusable, such as a <div>, it will be made focusable when this attribute is set.

Any integer value is accepted, but the following values are recommended:

-1: indicates the element may receive focus, but should not be sequentially focusable. The user agent may choose to ignore this preference if, for example, the user agent is a screen reader.
0: indicates the element may receive focus and should be placed in the sequential focus order in the order it appears in the DOM.
any positive integer: indicates the element should be placed in the sequential focus order relative to other elements with a positive tabindex.

Values other than 0 and -1 are generally not recommended as managing the relative order of focusable elements can be difficult and error-prone.

target

</>

pub fn target(value: String) -> @internal Attribute(msg)

Specifies where to display the linked resource or where to open the link. The following values are accepted:

Value	Description
“_self”	Open in the same frame/window (default)
“_blank”	Open in a new window or tab
“_parent”	Open in the parent frame
“_top”	Open in the full body of the window
framename	Open in a named frame

Note: consider against using "_blank" for links to external sites as it removes user control over their browsing experience.

title

</>

pub fn title(text: String) -> @internal Attribute(msg)

Annotate an element with additional information that may be suitable as a tooltip, such as a description of a link or image.

It is not recommended to use the title attribute as a way of providing accessibility information to assistive technologies. User agents often do not expose the title attribute to keyboard-only users or touch devices, for example.

translate

</>

pub fn translate(
  should_translate: Bool,
) -> @internal Attribute(msg)

Controls whether an element’s content may be translated by the user agent when the page is localised. This includes both the element’s text content and some of its attributes:

Attribute	Element(s)
abbr	th
alt	area, img, input
content	meta
download	a, area
label	optgroup, option, track
lang	*
placeholder	input, textarea
srcdoc	iframe
title	*
style	*
value	input (with type=“button” or type=“reset”)

type_

</>

pub fn type_(control_type: String) -> @internal Attribute(msg)

Type of form control

usemap

</>

pub fn usemap(value: String) -> @internal Attribute(msg)

Specifies the name of an image map to be used with the image.

value

</>

pub fn value(control_value: String) -> @internal Attribute(msg)

Specifies the value of an input or form control. Using this attribute will make sure the value is always in sync with your application’s modelled, a practice known as controlled inputs.

If you’d like to let the DOM manage the value of an input but still set a default value for users to see, use the default_value attribute instead.

width

</>

pub fn width(value: Int) -> @internal Attribute(msg)

Specifies the width of the element in pixels.

writingsuggestions

</>

pub fn writingsuggestions(
  enabled: Bool,
) -> @internal Attribute(msg)

Indicates if writing suggestions should be enabled for this element.