Components & Properties

List of all NUI components and their properties

Label

Label allows you to display a text on your app

Properties

html_tag - string

Example Value - "div"

The HTML tag to be used in this component. You can use other values like p , h1, i, b to better structure your app

Some tags may give unexpected results

---

preset - list

Example Value - ["rounded-card", "big-text"]

Apply a predefined set of styles to the component

Using Presets

---

text - string

Example Value - "Hello World" or "<b>Hello</b> World"

The text to display inside the component. Can be plain text or HTML

---

text_type - enum ("plain", "html")

Example Value - "html"

Whether to render the text as plain or HTML

---

text_align - enum ("left", "center", "right", "justify")

Example Value - "center"

Specifies the text alignment

---

font_size - string / integer

Example Value - "14" or "1.1em" or 14

The size of the text font. Supports all CSS units. Any integer or numeric string will default to px

---

font - string

Example Value - "Roboto"

The font family used for the Text

Ensure that the font is added in theme.css or Native Libraries

---

font_weight - string / integer

Example Value - "bold" or "400" or 600

The font weight sets the boldness of the text. Can take string or numeric values

---

foreground - string

Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"

The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

background - string

Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"

The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

height - string / number

Example Value - 400 or "400px" or "30vh"

The height of the component

---

width - string / number

Example Value - 400 or "400px" or "30vw"

The width of the component

---

visible - boolean

Example Value - True

Whether to display this component or hide it from view

---

border_radius - string / integer

Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"

The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.

---

border_size - string / integer

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.

---

border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")

Example Value - "solid"

The style of the border. Defaults to None (no border)

---

border_color - string

Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"

The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

margin - string

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.

---

padding - string

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.

---

icon - icon

Example Value - "fa:user" or "fas:user" or "bi:person" or "mi:person"

Sets the icon for the component. Supports Font Awesome, Material Icons and Bootstrap Icons.

Other than fa: Icons, all others require you to add the CDN URL for the icon library in your Native Library

<!-- Font Awesome   --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<!-- Bootstrap Icons--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<!-- Material Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

---

icon_align - enum ("left", "right", "top", "bottom")

Example Value - "right"

Sets the alignment of the icon with respect to the text

---

icon_size - string or number

Example Value - 20 or "15px" or "1.1em"

Sets the size of the icon. Supports all CSS units. Any integer or numeric string will default to px

---

custom_icon - string

Example Value - "<svg ...> </svg>"

Allows you to create a custom icon by directly defining the raw HTML. Useful if you wish to use images or SVGs as icons

---

css - string

Example Value - "font-size: 40px"

Allows injecting custom CSS into the component. Follows a simpler CSS syntax.

Using Custom CSS

---

hover_css - string

Example Value - "color: red"

Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.

Using Custom CSS

---

icon_css - string

Example Value - "color: gold"

Allows defining custom CSS for the component's icon. Follows a simpler CSS syntax.

Using Custom CSS

Events

show()

When the component is shown on the screen

---

hide()

When the component is removed from the screen

---

hover()

When the mouse is hovered over the component

---

hover_out()

When the mouse is hovered out of the component

Methods

set_property(css_property, css_value)

Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.

---

add_event(event_name, event_handler)

Adds an event handler for any supported JS event. Useful for listening to events that are not directly available

Using Javascript

---

add_preset(preset)

Appends a new preset to the component if it has not been added yet. Ignored otherwise

---

remove_preset(preset)

Removes a preset from the component if added. Ignored otherwise

---

toggle_preset(preset)

If the preset is already added, it will be removed. Otherwise, it will be added.

Using Presets

Button

Buttons allow you to make clickable components

Properties

html_tag - string

Example Value - "div"

The HTML tag to be used in this component.

Some tags may give unexpected results

---

preset - list

Example Value - ["rounded-card", "big-text"]

Apply a predefined set of styles to the component

Using Presets

---

text - string

Example Value - "Hello World" or "<b>Hello</b> World"

The text to display inside the component. Can be plain text or HTML

---

text_type - enum ("plain", "html")

Example Value - "html"

Whether to render the text as plain or HTML

---

text_align - enum ("left", "center", "right", "justify")

Example Value - "center"

Specifies the text alignment

---

font_size - string / integer

Example Value - "14" or "1.1em" or 14

The size of the text font. Supports all CSS units. Any integer or numeric string will default to px

---

font - string

Example Value - "Roboto"

The font family used for the Text

Ensure that the font is added in theme.css or Native Libraries

---

font_weight - string / integer

Example Value - "bold" or "400" or 600

The font weight sets the boldness of the text. Can take string or numeric values

---

foreground - string

Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"

The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

background - string

Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"

The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

height - string / number

Example Value - 400 or "400px" or "30vh"

The height of the component

---

width - string / number

Example Value - 400 or "400px" or "30vw"

The width of the component

---

visible - boolean

Example Value - True

Whether to display this component or hide it from view

---

enabled - boolean

Example Value - True

Whether to allow interaction on this component or not\

---

border_radius - string / integer

Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"

The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.

---

border_size - string / integer

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.

---

border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")

Example Value - "solid"

The style of the border. Defaults to None (no border)

---

border_color - string

Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"

The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

margin - string

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.

---

padding - string

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.

---

icon - icon

Example Value - "fa:user" or "fas:user" or "bi:person" or "mi:person"

Sets the icon for the component. Supports Font Awesome, Material Icons and Bootstrap Icons.

Other than fa: Icons, all others require you to add the CDN URL for the icon library in your Native Library

<!-- Font Awesome   --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<!-- Bootstrap Icons--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<!-- Material Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

---

icon_align - enum ("left", "right", "top", "bottom")

Example Value - "right"

Sets the alignment of the icon with respect to the text

---

icon_size - string or number

Example Value - 20 or "15px" or "1.1em"

Sets the size of the icon. Supports all CSS units. Any integer or numeric string will default to px

---

custom_icon - string

Example Value - "<svg ...> </svg>"

Allows you to create a custom icon by directly defining the raw HTML. Useful if you wish to use images or SVGs as icons

---

css - string

Example Value - "font-size: 40px"

Allows injecting custom CSS into the component. Follows a simpler CSS syntax.

Using Custom CSS

---

hover_css - string

Example Value - "color: red"

Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.

Using Custom CSS

---

disabled_css - string

Example Value - "opacity: 0.5"

Allows defining custom CSS for when the component is disabled. Follows a simpler CSS syntax.

Using Custom CSS

---

active_css - string

Example Value - "background: theme:Primary"

Allows defining custom CSS for when the component is active (i.e., when it has been clicked). Follows a simpler CSS syntax.

Using Custom CSS

---

icon_css - string

Example Value - "color: gold"

Allows defining custom CSS for the component's icon. Follows a simpler CSS syntax.

Using Custom CSS

Events

click()

When the component is clicked

---

show()

When the component is shown on the screen

---

hide()

When the component is removed from the screen

---

hover()

When the mouse is hovered over the component

---

hover_out()

When the mouse is hovered out of the component

Methods

set_property(css_property, css_value)

Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.

---

add_event(event_name, event_handler)

Adds an event handler for any supported JS event. Useful for listening to events that are not directly available

Using Javascript

---

add_preset(preset)

Appends a new preset to the component if it has not been added yet. Ignored otherwise

---

remove_preset(preset)

Removes a preset from the component if added. Ignored otherwise

---

toggle_preset(preset)

If the preset is already added, it will be removed. Otherwise, it will be added.

Using Presets

TextBox

TextBox allows you to take input text from the user

Properties

html_tag - string

Example Value - "input"

The HTML tag to be used in this component.

Some tags may give unexpected results

---

preset - list

Example Value - ["rounded-card", "big-text"]

Apply a predefined set of styles to the component

Using Presets

---

text - string

Example Value - "Hello World" or "<b>Hello</b> World"

The text to display inside the component. Can be plain text or HTML

---

type - enum ("text", "password", "email", "search", "tel", "url", "number")

Example Value - "text"

Whether to render the text as plain or HTML

---

placeholder - string

Example Value - "Enter Your Name"

The text to display when the user has not entered any value

---

text_align - enum ("left", "center", "right", "justify")

Example Value - "center"

Specifies the text alignment

---

font_size - string / integer

Example Value - "14" or "1.1em" or 14

The size of the text font. Supports all CSS units. Any integer or numeric string will default to px

---

font - string

Example Value - "Roboto"

The font family used for the Text

Ensure that the font is added in theme.css or Native Libraries

---

font_weight - string / integer

Example Value - "bold" or "400" or 600

The font weight sets the boldness of the text. Can take string or numeric values

---

foreground - string

Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"

The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

background - string

Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"

The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

height - string / number

Example Value - 400 or "400px" or "30vh"

The height of the component

---

width - string / number

Example Value - 400 or "400px" or "30vw"

The width of the component

---

visible - boolean

Example Value - True

Whether to display this component or hide it from view

---

enabled - boolean

Example Value - True

Whether to allow interaction on this component or not.

---

border_radius - string / integer

Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"

The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.

---

border_size - string / integer

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.

---

border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")

Example Value - "solid"

The style of the border. Defaults to None (no border)

---

border_color - string

Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"

The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

margin - string

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.

---

padding - string

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.

---

css - string

Example Value - "font-size: 40px"

Allows injecting custom CSS into the component. Follows a simpler CSS syntax.

Using Custom CSS

---

focus_css - string

Example Value - "border: solid black 2px"

Allows defining custom CSS for when the component is focused. Follows a simpler CSS syntax.

Using Custom CSS

---

hover_css - string

Example Value - "color: red"

Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.

Using Custom CSS

---

disabled_css - string

Example Value - "opacity: 0.5"

Allows defining custom CSS for when the component is disabled. Follows a simpler CSS syntax.

Using Custom CSS

---

placeholder_css - string

Example Value - "color: #aaa"

CSS styles applied to the placeholder text

Using Custom CSS

Events

pressed_enter()

When the Enter key is pressed on the component

---

change()

Fires when the value is changed and the component loses focus (This behavior is different from the default change event on anvil since it doesn't fire immediately after the value is changed).

---

input()

Fires immediately when the value is changed. (This behavior is similar to the default change event on Anvil)

---

focus()

When the component receives focus

---

lost_focus()

When the component loses focus

---

show()

When the component is shown on the screen

---

hide()

When the component is removed from the screen

---

hover()

When the mouse is hovered over the component

---

hover_out()

When the mouse is hovered out of the component

Methods

set_property(css_property, css_value)

Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.

---

add_event(event_name, event_handler)

Adds an event handler for any supported JS event. Useful for listening to events that are not directly available

Using Javascript

---

add_preset(preset)

Appends a new preset to the component if it has not been added yet. Ignored otherwise

---

remove_preset(preset)

Removes a preset from the component if added. Ignored otherwise

---

toggle_preset(preset)

If the preset is already added, it will be removed. Otherwise, it will be added.

Using Presets

TextArea

TextArea allows you to take a multiline input text from the user

Properties

html_tag - string

Example Value - "input"

The HTML tag to be used in this component.

Some tags may give unexpected results

---

preset - list

Example Value - ["rounded-card", "big-text"]

Apply a predefined set of styles to the component

Using Presets

---

text - string

Example Value - "Hello World" or "<b>Hello</b> World"

The text to display inside the component. Can be plain text or HTML

---

---

placeholder - string

Example Value - "Enter Your Message"

The text to display when the user has not entered any value

---

text_align - enum ("left", "center", "right", "justify")

Example Value - "center"

Specifies the text alignment

---

font_size - string / integer

Example Value - "14" or "1.1em" or 14

The size of the text font. Supports all CSS units. Any integer or numeric string will default to px

---

font - string

Example Value - "Roboto"

The font family used for the Text

Ensure that the font is added in theme.css or Native Libraries

---

font_weight - string / integer

Example Value - "bold" or "400" or 600

The font weight sets the boldness of the text. Can take string or numeric values

---

foreground - string

Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"

The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

background - string

Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"

The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

height - string / number

Example Value - 400 or "400px" or "30vh"

The height of the component

---

width - string / number

Example Value - 400 or "400px" or "30vw"

The width of the component

---

visible - boolean

Example Value - True

Whether to display this component or hide it from view

---

enabled - boolean

Example Value - True

Whether to allow interaction on this component or not.

---

border_radius - string / integer

Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"

The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.

---

border_size - string / integer

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.

---

border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")

Example Value - "solid"

The style of the border. Defaults to None (no border)

---

border_color - string

Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"

The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors

---

margin - string

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.

---

padding - string

Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"

Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.

---

css - string

Example Value - "font-size: 40px"

Allows injecting custom CSS into the component. Follows a simpler CSS syntax.

Using Custom CSS

---

focus_css - string

Example Value - "border: solid black 2px"

Allows defining custom CSS for when the component is focused. Follows a simpler CSS syntax.

Using Custom CSS

---

hover_css - string

Example Value - "color: red"

Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.

Using Custom CSS

---

disabled_css - string

Example Value - "opacity: 0.5"

Allows defining custom CSS for when the component is disabled. Follows a simpler CSS syntax.

Using Custom CSS

---

placeholder_css - string

Example Value - "color: #aaa"

CSS styles applied to the placeholder text

Using Custom CSS

Events

change()

Fires when the value is changed and the component loses focus (This behavior is different from the default change event on anvil since it doesn't fire immediately after the value is changed).

---

input()

Fires immediately when the value is changed. (This behavior is similar to the default change event on Anvil)

---

focus()

When the component receives focus

---

lost_focus()

When the component loses focus

---

show()

When the component is shown on the screen

---

hide()

When the component is removed from the screen

---

hover()

When the mouse is hovered over the component

---

hover_out()

When the mouse is hovered out of the component

Methods

set_property(css_property, css_value)

Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.

---

add_event(event_name, event_handler)

Adds an event handler for any supported JS event. Useful for listening to events that are not directly available

Using Javascript

---

add_preset(preset)

Appends a new preset to the component if it has not been added yet. Ignored otherwise

---

remove_preset(preset)

Removes a preset from the component if added. Ignored otherwise

---

toggle_preset(preset)

If the preset is already added, it will be removed. Otherwise, it will be added.

Using Presets