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

Methods

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

Methods

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

Methods

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

Methods