The Tile Component is a versatile container that allows you to control the column width of components within it. Tiles are always placed inside a Section and can be nested within each other for more precise formatting. Use Tiles to group components visually and create clean, organized layouts.
When should I use a Tile?
Tiles are perfect for grouping components inside a Section with more precise control over their alignment. Sections can then be grouped together using a Group component.
Organize Form Layout
Use Tiles to group related components, such as inputs and dropdowns, within a specific column width.
Use Tiles to group related components, such as inputs and dropdowns, within a specific column width.
Nesting Tiles
Nest Tiles inside each other for more granular control over how components are aligned, yielding more create complex layouts.
Nest Tiles inside each other for more granular control over how components are aligned, yielding more create complex layouts.
Features & Configuration
Adding a Tile to your form is simple. Select the Tile option from the component library and drag it onto the canvas. Components can then be placed inside the Tile.
After placing the component, you can customize its properties in the right-hand panel:
Properties
Width
Set the column width for the Tile (between 1 and 12 columns) to control how much space it occupies within the Section.
Set the column width for the Tile (between 1 and 12 columns) to control how much space it occupies within the Section.
Logic
Display Logic
Use Display Logic to control when this Tile is shown or hidden based on other form inputs.
Read more about Display Logic
Use Display Logic to control when this Tile is shown or hidden based on other form inputs.
Keep in Mind...
If the Tile itself is hidden, all components inside it will also be hidden — even if their individual display logic is set to show. The Tile's display logic takes priority over the components within it.
If the Tile itself is hidden, all components inside it will also be hidden — even if their individual display logic is set to show. The Tile's display logic takes priority over the components within it.
Attributes
Border
Toggle the border option to add a border around the Tile for visual separation.
Toggle the border option to add a border around the Tile for visual separation.
Border Weight
If Border is enabled, set the thickness of the border from 1 to 8 pixels.
If Border is enabled, set the thickness of the border from 1 to 8 pixels.
Border Color
If Border is enabled, choose a color for the border by selecting from the color spectrum or entering a hex code.
If Border is enabled, choose a color for the border by selecting from the color spectrum or entering a hex code.
Background Color
Customize the background color of the Tile to help visually organize content or match your form's design.
Customize the background color of the Tile to help visually organize content or match your form's design.
Details
ID
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive for easy reference.
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive for easy reference.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article