Tile input
The tile input is a component that allows the user to select one or more options from a list of options. It is a visual representation of the checkbox input.
Principle
When a user selects a tile, the corresponding value becomes true in the data object. If the unique property is true, selecting one tile automatically deselects the others. The data structure always reflects the current state of selection.
{
"options": {
"component": "tile",
"label": "Options",
"list": [
{ "value": "option1", "label": "Option 1" },
{ "value": "option2", "label": "Option 2" },
{ "value": "option3", "label": "Option 3" }
]
}
}
This will generate this data :
{
"options": {
"option1": true,
"option2": false,
"option3": false
}
}
By default, we can select multiple options. If we want to select only one option, we can set the unique property to true.
Required
As a tile component generate an object as value, using the required validation could lead to an unexpected behavior as the object generated could be an object of false values. But you can use the required_tile validation to ensure that at least one tile is selected.
{
"selected_vehicles": {
"component": "tile",
"label": "Selected vehicles",
"list": [
{ "value": "cars", "label": "Cars" },
{ "value": "motorcycles", "label": "Motorcycles" },
{ "value": "bikes", "label": "Bikes" }
],
"validations": ["required_tile"]
}
}
Options
We can define options on the tile component, that will apply to all tiles.
Size
{
"options": {
"component": "tile",
"label": "Options",
"list": [
{ "value": "option1", "label": "Option 1" },
{ "value": "option2", "label": "Option 2" },
{ "value": "option3", "label": "Option 3" }
],
"options": {
"size": "lg"
}
}
}
In this example, all tiles will have the size lg.
Available size are
| Size | Description |
|---|---|
lg | Large |
md | Medium |
s | Small |
Count
We can display a count below the selected tiles by setting the count property to true.
{
"selected_vehicles": {
"component": "tile",
"label": "Selected vehicles",
"list": [
{ "value": "cars", "label": "Cars" },
{ "value": "motorcycles", "label": "Motorcycles" },
{ "value": "bikes", "label": "Bikes" }
],
"options": {
"count": true
}
}
}
In this example, a count will be displayed below the selected tiles. The data will be like this :
{
"selected_vehicles": {
"cars": true,
"motorcycles": false,
"bikes": false
},
"selected_cars_count": 1
}
The related count will be available in the data as [name_of_the_component]_[value_of_the_selected_tile]_count.
Tile properties
Size
By setting the size on a single tile, we can change the size of the tile for that specific option.
{
"options": {
"component": "tile",
"label": "Options",
"list": [
{ "value": "option1", "label": "Option 1", "size": "lg" },
{ "value": "option2", "label": "Option 2", "size": "md" },
{ "value": "option3", "label": "Option 3", "size": "s" }
]
}
}
Img
We can define an image to be displayed in the tile by setting the img property. It accepts a string that is the path to the image..
{
"options": {
"component": "tile",
"label": "Options",
"list": [
{
"value": "option1",
"label": "Option 1",
"img": "https://via.placeholder.com/150"
}
]
}
}
Show label
We can show the label of the tile by setting the showLabel property to true.
{
"options": {
"component": "tile",
"label": "Options",
"list": [{ "value": "option1", "label": "Option 1", "showLabel": true }]
}
}