The TILE component displays a group of selectable tiles (cards) that users can choose from. Each tile can display an icon, a label, and optional hint text. This component is ideal for presenting product options, insurance packages, or any selection scenario where visual tiles provide a better user experience than traditional radio buttons or checkboxes.
🛝 Use the Dynamic Form Playground to see the Tile component in action and try out different configurations
| Property | Type | Required | Description |
|---|---|---|---|
type |
'TILE' |
Yes | Specifies the field type as TILE. |
id |
string |
Yes | Unique identifier for the field. The field's value is stored in the form state under this key. |
renderName |
string |
No | Optional name added as data-render-name attribute to locate the rendered element in the DOM. |
label |
string |
Yes | Label text displayed above the tile group. Supports translation and string interpolation. |
value |
string or string[] |
No | Initial selected value(s). For single-select mode: the value of one tile option. For multi-select mode: array of tile option values. Must match values defined in options. |
validators |
array |
No | Validation rules for the field. Common type: REQUIRED. The validator has type and optional errorMessage. |
testId |
string |
No | Test identifier for automated testing. Set as data-testid attribute. |
acl |
array |
No | Access control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression). |
spacing |
string |
No | Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (48px), 'XXL' (64px). |
infoIcon |
DfInfoIconConfig |
No | Info icon with popover. Object with popoverText (string, required) and popoverDirection ('top', 'bottom', 'left', 'right'). |
note |
string |
No | Informational note displayed below the tile group (hidden when field has validation errors). Supports translation and string interpolation. |
Note: This component does not support the hint property at the field level, but individual tile options can have hint text. The columnSpan property is also not supported for this component.
| Property | Type | Required | Description |
|---|---|---|---|
options |
DfTile[] |
Yes | Configuration for all tile options to be displayed. For the best user experience, retail journeys should not have more than 6 options. See also DfTile |
layout |
DfTileAutogridLayout | DfTileFixedWidthLayout |
No | The layout configuration for the tile group. See also DfTileAutogridLayout, DfTileFixedWidthLayout |
multiSelect |
boolean |
No | Whether multiple tiles can be selected at the same time. When false, only one tile can be selected (FormControl value is a string).When true, multiple tiles can be selected (FormControl value is an array).The default is false. |
| Property | Type | Required | Description |
|---|---|---|---|
label |
string |
Yes | The label to be displayed on the tile. It's translatable by default and supports string interpolation. |
value |
string |
Yes | Value of the tile option to be used as a form value when the tile is selected. |
hint |
string |
No | The hint text to be displayed under the label on the tile. It's translatable by default and supports string interpolation. |
icon |
string |
No | Name of the icon representing the tile option. Available icon names can be found in the NDBX documentation: https://ngx-brand-kit.frameworks.allianz.io/documentation/icon/overview. |
testId |
string |
No | The id used to select the element in the tests (unit test, e2e testing) |
| Property | Type | Required | Description |
|---|---|---|---|
useAutogrid |
boolean |
Yes | Whether to use Aquila's autogrid layout mode. When true, tiles fill available space automatically using NxTileGroupComponent's autoGrid feature.When false fixed-width tiles are used.The default is false |
maxColumns |
number |
No | Maximum number of columns (1-7) when autogrid is enabled. Only applicable when useAutogrid is true.The default is 4. |
tileLayout |
string |
No | The layout orientation (horizontal or vertical) of tiles in the group (for both mobile and desktop).auto is the default and will use vertical for desktop and horizontal for mobile. |
| Property | Type | Required | Description |
|---|---|---|---|
tileLayout |
string |
No | The layout orientation (horizontal or vertical) of tiles in the group (for both mobile and desktop).auto will use vertical for desktop and horizontal for mobile.The default is auto. |
tileWidth |
string |
No | Width (small, medium or large) of the tiles in the group.Only applicable when useAutogrid is false.The default is small. |
useAutogrid |
boolean |
No | Whether to use Aquila's autogrid layout mode. When true, tiles fill available space automatically using NxTileGroupComponent's autoGrid feature.When false fixed-width tiles are used.The default is false |
A simple tile group with three insurance package options. Users can select only one tile at a time.
{
"id": "insurancePackage",
"type": "TILE",
"label": "Choose your insurance package",
"options": [
{
"value": "basic",
"label": "Basic",
"icon": "product-care-insurance",
"hint": "Essential coverage"
},
{
"value": "premium",
"label": "Premium",
"icon": "product-heart",
"hint": "Extended benefits"
},
{
"value": "family",
"label": "Family",
"icon": "product-plane",
"hint": "Full family protection"
}
],
"validators": [
{
"type": "REQUIRED",
"errorMessage": "Please select an insurance package"
}
]
}A tile group where users can select multiple coverage options. Uses multi-select mode with some options pre-selected.
{
"id": "coverageOptions",
"type": "TILE",
"label": "Select your coverage options",
"multiSelect": true,
"value": ["health", "dental"],
"options": [
{
"value": "health",
"label": "Health",
"icon": "product-heart"
},
{
"value": "dental",
"label": "Dental",
"icon": "product-care-insurance"
},
{
"value": "vision",
"label": "Vision",
"icon": "product-plane"
},
{
"value": "life",
"label": "Life Insurance",
"icon": "file"
}
]
}A tile group with a fixed-width layout and horizontal tile orientation, displaying up to 3 columns.
{
"id": "vehicleType",
"type": "TILE",
"label": "Select your vehicle type",
"options": [
{
"value": "car",
"label": "Car",
"icon": "product-car",
"hint": "Private vehicle"
},
{
"value": "motorcycle",
"label": "Motorcycle",
"icon": "product-car",
"hint": "Two-wheeler"
},
{
"value": "truck",
"label": "Truck",
"icon": "product-car",
"hint": "Commercial vehicle"
}
],
"layout": {
"useAutogrid": true,
"maxColumns": 3,
"tileLayout": "horizontal"
},
"validators": [
{
"type": "REQUIRED"
}
]
}For complete API documentation, see:
For Aquila component documentation and design guidelines, see Tile - Aquila Design System.