Preview

Usage

<cs-tiles id="my-tiles" value="s3"></cs-tiles>
<script>
  document.getElementById('my-tiles').items = [
    { value: 's3', label: 'Amazon S3' },
    { value: 'ebs', label: 'Amazon EBS' },
    { value: 'efs', label: 'Amazon EFS' },
  ];
</script>

Properties

aria-controlsstring

Adds aria-controls attribute to the component. If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.

aria-labelstring

Adds aria-label on the group. Don't set this property if you are using this form element within a form field because the form field component automatically sets the correct labels to make the component accessible.

aria-requiredboolean

Adds aria-required on the group.

columnsnumber

The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4. If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3. It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.

itemsReadonlyArray<TilesProps.TilesDefinition> default: []

List of tile definitions. Each tile has the following properties:

• value [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.
• label [unknown] - A short description for the option the tile represents.
• description [unknown] - (Optional) Further explanatory guidance on the tile option, shown below the label.
• image [unknown] - (Optional) Visually distinctive image for the tile option, shown below the description.
• disabled [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.
• controlId [string] - (Optional) The ID of the internal input. You can use this to relate a label element's for attribute to this control. We recommend that you don't set this property because it's automatically set by the tiles component.

namestring

Specify a custom name for the native radio buttons. If not provided, the tiles component generates a random name.

read-onlyboolean default: false

Specifies if the control is read-only, which prevents the user from modifying the value, but does not prevent the value from being included in a form submission. A read-only control is still focusable.

valuestring | nullrequired

Specifies the value of the selected tile. If you want to clear the selection, use null.

Events

changeCustomEvent<TilesProps.ChangeDetail>

Called when the user selects a different tile.