Tile Component

1. Overview
2. Key Features
3. Configuration Properties
4. Configuration Examples
5. API Reference

1. Overview

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

2. Key Features

Single and Multi-Select Modes: Choose between single tile selection (radio button behavior) or multiple tile selection (checkbox behavior)
Icon Support: Display icons from the NDBX icon library on each tile for better visual recognition
Responsive Auto-Grid Layout: Tiles automatically arrange themselves in a responsive grid that adapts to the available container width
Fixed-Width Layout Option: Alternative layout with fixed tile widths for more controlled designs
Horizontal and Vertical Tile Layouts: Configure tile orientation (vertical shows icon above label, horizontal shows icon beside label)
Mobile Optimization: Automatically switches to horizontal layout on mobile devices for better touch interaction (when using auto layout mode)
Translation and Interpolation: Labels and hints support translation and dynamic string interpolation from form state

3. Configuration Properties

Base Properties

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'` (40px), `'XXL'` (48px).
`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, meaning that the component always spans the full width of the form (12 columns); use the layout configuration to control how tiles are arranged within the group instead.

Component Specific Properties

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`.

Options Properties (DfTile)

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)

Layout Configuration (DfTileAutogridLayout)

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.

Layout Configuration (DfTileFixedWidthLayout)

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`

4. Configuration Examples

Basic Single-Select Tile

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"
    }
  ]
}

Multi-Select Tile with Pre-selected Values

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"
    }
  ]
}

Tile with Custom Layout Configuration

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"
    }
  ]
}

5. API Reference

For complete API documentation, see:

For Aquila component documentation and design guidelines, see Tile - Aquila Design System.