Checkbox element
Allows users to toggle a yes/no or true/false value.
Visual
Content
Label
Defines the text displayed next to the checkbox.
Auto-binding
Auto-binding automatically updates a thing as the user modifies the input element, without requiring a workflow. Enable this option to bind the input element directly to a field on a thing. For auto-binding to work:
The input element must be inside a group or page with a defined Type of content
The parent group's (or page's) thing is the record that will be modified
The relevant data type must have the correct edit permissions configured in the Privacy section of the Data tab
If privacy rules don't allow the change, the update won't be applied, and the user will see an error message. You can edit the error message
This property offers the following options:
Off: Auto-binding is disabled.
On: Auto-binding is enabled. Setting it to On reveals two additional properties:
Field to modify: The field on the parent element's data type that you want to modify.
Alert on success: A customized alert message displayed when the data is successfully saved. For this to work, you need at least one alert element on the page.
Preset status
Sets whether the checkbox is checked by default when the page loads. This property isn't available when auto-binding is enabled -- in that case, the checkbox's state is pulled directly from the database.
Size
Sets the width and height of the element. These properties depend on the layout configuration of the parent element.
Height
Sets the width/height of the element. The column, row and align layouts have a more flexible way to set element position.
Fixed
Sets the width of the element as a fixed value.
Pixels: sets the width to a fixed pixel value
Percentage: sets the width to a percentage of the parent container
Fit
The element’s width and height automatically adjust based on the size of its child elements. To add a mininum and/or maximum value, click the + symbol.
Min: the minimum width/height, defined as a pixel value or percentage of the parent container.
Max: the maximum width/height, defined as a pixel value or percentage of the container.
Fill
The element's width and height fills the available space in the parent container. To add a mininum and/or maximum value, click the + symbol.
Min: the minimum width/height, defined as a pixel value or percentage of the parent container.
Max: the maximum width/height, defined as a pixel value or percentage of the container.
Parent container has a fixed layout
Width/height
Sets the widht/height of the element. The fixed layout has a more rigid way of setting element size, based on static pixel values.
Fixed
Sets the width of an element as a fixed pixel value.
Layout
Alignment
Parent layout: Column
In a column layout, a child element's property is restricted to the vertical axis.
Left
Elements are aligned to the left edge.
Center
Elements are aligned to the vertical center of the container.
Right
Elements are aligned to the right edge.
Parent layout: Row
In a row layout, a child element's alignment property is restricted to the horizontal axis.
Top
Elements are aligned to the top edge of the container
Center
Elements are aligned to the horizontal center of the container.
Bottom
Elements are aligned to the bottom edge of the container.
Parent layout: Align
In an align layout, a child element's property is restricted to one of nine cells in a 3x3 grid. Any element placed within the same cell will overlap.
Top-left
Elements are aligned to the top-left corner of the container.
Top-center
Elements are aligned to the top edge and horizontally centered within the container.
Top-right
Elements are aligned to the top-right corner of the container.
Center-left
Elements are vertically centered and aligned to the left edge of the container.
Center
Elements are vertically and horizontally centered within the container.
Center-right
Elements are vertically centered and aligned to the right edge of the container.
Bottom-left
Elements are aligned to the bottom-left corner of the container.
Bottom-center
Elements are aligned to the bottom edge and horizontally centered within the container.
Bottom-right
Elements are aligned to the bottom-right corner of the container.
Parent layout: Fixed
Elements are positioned using fixed X and Y coordinates, defined in pixels.
Spacing
Padding
Defines the internal spacing between an element’s content and its border in a static pixel value. Padding adds space inside the element, without affecting its position relative to other elements.
Padding is added on the vertical and horizontal axis respectively.
Margin
Defines the external spacing between an element and surrounding elements.
Margin adds space outside the element’s border. It affects the distance between elements and influences layout positioning.
Style
Style sets the visual design of the element, including properties such as colors, fonts, borders, shadows and other appearance settings.
Styles are shared across elements. When multiple elements use the same style, updating the style will automatically update all elements that reference it.
Style selector
Select the style to apply to the selected element.
Edit style
To edit the style, click the edit style icon. The changes to that style will apply to all elements using that style.
Detach style
Detaching the style will disconnect the element from the current style, but keep the formatting of the style until you make changes to it. This only affects the selected element.
Overriden styles
You can override a style on one or more elements, using the defined style properties but allowing you to make individual changes to styling properties that apply only to the selected element(s).
Overridden styles will be marked with an Overridden labelI.
You can reset the selected element's style by clicking the Reset icon.
Appearance
Opacity
Opacity sets the transparency level of the selected element(s). At 100%, the element is fully opaque. At 0%, it is fully transparent (invisible).
Opacity affects child elements: If applied to a container, all child elements inherit the same opacity level.
Opacity does not collapse the element: Even at 0%, the element still occupies space in the layout. Unlike hiding an element (using This element is visible on page load, a conditional visibility rule, or a hide/show action), opacity does not reduce the element’s width or height to zero.
Radius
Sets the roundness of the selected element(s).
How radius is calculated
The value is applied in pixels and determines the radius of the corner’s arc. Larger values create more rounded corners.
The maximum visible roundness depends on the element’s size. If the radius is set to a value greater than half of the element’s width or height, the browser automatically caps it at half of the smallest dimension. For example:
A square (100 × 100 px) with a radius of 50 px becomes a circle.
A rectangle (200 × 100 px) with a radius of 50 px becomes a pill shape.
Setting a radius larger than 50 px in the second example will not increase the curvature further, because 50 px is already half of the element’s height.
Individual radius
To set an individual radius of each of the four corners, click the Individual radius icon.
Border
The border defines the outline of the selected element.
It is drawn around the element’s content and padding. Increasing the border width increases the total visible size of the element unless the layout system compensates for it.
Borders sit outside the padding but inside the margin. Padding adds space between the content and the border, while margin adds space outside the border, affecting the distance to neighboring elements.
Border types
Note: some of these border types require a width of more than 1 pixel to make a visible difference.
None
No border is displayed.
Solid
A single continuous line.
Dotted
A series of round dots forming the border line.
Dashed
A series of short line segments forming the border.
Double
Two parallel solid lines. The total border width is divided between the two lines and the space between them.
Groove
A carved effect that makes the border appear pressed into the page, using light and dark shading.
Ridge
The opposite of groove; creates a raised effect using light and dark shading.
Inset
Makes the element appear embedded into the page, with shading that simulates depth inward.
Outset
Makes the element appear raised from the page, with shading that simulates depth outward.
Border width
Sets the width of the border, defined by a pixel value.
Border color
Sets the color of the border in a hex value. You can also set the opacity of the border. Can be a static or the result of a dynamic expression.
Individual borders
To set individual border properties on the top, bottom, left and right, clitk the individual border icon.
Text
Sets the typography of the selected element(s). Only applies to elements that contain text.
Font
Sets the font family used for the text. You can choose a custom font or use a saved font variable.
Font weight
Sets the thickness of the text. Lower values (for example, 400) are lighter, while higher values (for example, 600 or 700) appear bolder.
Understanding font weight
Font weight is not calculated mathematically. It’s defined by the font itself.
Most modern fonts use a numeric weight scale from 100 to 900:
100–300: lighter weights
400: regular (normal)
500–600: medium / semi-bold
700: bold
800–900: extra bold / black
However, available weights differ between fonts. One font might include 400, 600, and 700, while another only includes 400 and 700. A weight of 700 in one font is also not guaranteed to look the same as 700 in another font.
The numeric scale (100–900) is standardized in CSS, but each font designer defines how thick “700” actually appears within that typeface.
Font size
Defines the size of the text in pixels.
Text alignment
Controls how text is aligned within the element: left, center, or right.
Text formatting
Applies inline formatting options such as bold, italic, and underline. Click the More properties icon for more formatting options.
Additional text properties
Word spacing
Defines the horizontal space between words. Increasing the value spreads words further apart; decreasing it brings them closer together.
Line spacing
Controls the vertical distance between lines of text (line height). Higher values improve readability for longer text blocks, while lower values create a more compact layout.
Letter spacing
Adjusts the horizontal space between individual characters. Positive values increase spacing (tracking), while negative values tighten the text.
Text alignment (vertical)
Controls how text is aligned vertically within its container (for example, aligned to the top or bottom when vertical alignment is enabled).
Text shadow
Adds a shadow effect behind the text. You can configure properties such as offset, blur, and color to create depth or improve contrast against the background.
Text color
Sets the color of the text. You can select a custom color or use a saved color variable.
Shadow
Adds an outside or inside shadow to the selected element(s).
Shadow type
Defines whether the shadow appears outside or inside the element.
Outside: creates a drop shadow around the element.
Inside: creates an inner shadow within the element’s boundaries.
Position (X / Y)
Sets the horizontal (X) and vertical (Y) offset of the shadow in pixels.
Positive X moves the shadow to the right; negative X moves it to the left.
Positive Y moves the shadow downward; negative Y moves it upward.
Blur
Controls how soft the shadow appears. Higher values create a more diffused shadow; lower values produce a sharper edge.
Spread
Defines how much the shadow expands or contracts before blur is applied. Positive values increase the shadow’s size; negative values reduce it.
Color
Sets the shadow’s color and opacity. You can define a custom color (for example, a hex value) and adjust its transparency percentage.
Interaction
Visibility
Visible on page load
Enable this to make the element visible by default. This checkbox makes the element visible every time the page loads or reloads. Change the visibility of the element based on certain conditions in the Conditional section in the property editor or with a show/hide element action in a workflow.
Collapse when hidden
Enable this to make the element collapse its height and width to 0 pixels when hidden. This allows surrounding elements to automatically shift into the freed space, preventing empty gaps in the layout.
This is commonly used in single-page applications, where elements are shown and hidden dynamically as users navigate, without leaving the page.
Options
Make required
When enabled, the user can't trigger any workflows tied to the checkbox if its value is empty.
Make disabled
Disables the checkbox so the user can't interact with it.
Disabling an element is a UI setting and doesn't securely prevent data changes. Always enforce restrictions with server-side conditions and privacy rules in the Data tab.
Transitions
Transitions add animation when a style property changes.
Instead of updating instantly, the element gradually shifts from its previous state to the new one over a defined duration. For example, if you reduce an element’s width, a transition can make it smoothly shrink rather than change size immediately.
Transition styles
ease
Starts slowly, speeds up in the middle, and slows down at the end.
ease-in
Starts slowly and accelerates toward the end.
ease-out
Starts quickly and decelerates toward the end.
ease-in-out
Starts slowly, accelerates in the middle, and slows down again at the end.
linear
Moves at a constant speed from start to finish.
step-start
Jumps immediately to the end state at the start of the transition.
step-end
Remains in the start state and jumps to the end state at the very end of the transition.
Transition duration
Transition duration defines how long the transition animation runs, measured in milliseconds.
Advanced
ID attribute
A unique identifier assigned to the element. This can be used to reference the element in custom code, such as JavaScript or CSS, using document.getElementById() or CSS selectors.
For this property to be visible, you need to enable Expose the option to add an ID attribute to HTML elements in Settings – Advanced options.
Last updated
Was this helpful?