Skip to main content
Table of Contents

Tiles

Tiles are Radio buttons styled with icons or images.

Table of Contents
Used for this
  • Like Radios, Tiles are for choices that can’t occur at the same time
Not for this
  • To choose more than one option at once, use a Checkbox instead
  • To select from a long list of options, use a Combobox
  • To define an action, use a Button instead
  • For navigation, use an Anchor instead

How to use it

Default

The typical usage of a Tiles component.

Description

A description adds additional context to the Tile label.

Disabled

Disabled Tiles are not interactive and may not be perceived by a screen reader.

Layout

Content within a single Tile is vertically centered by default. The layout can be adjusted by setting isCentered to false.

Configuration

  • Name9.0.0-next.26•View source•View on npm
  • Installnpm install @zendeskgarden/react-forms
  • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
  • Importimport { Tiles } from '@zendeskgarden/react-forms'

API

Tiles

Extends HTMLAttributes<HTMLDivElement>

Prop nameTypeDefaultDescription
isCentered
boolean
true
Centers tile content
name
string
Required
Sets the name used to reference the value of the control
onChange
ChangeEventHandler<HTMLInputElement>
Handles selection change event
value
string | number | readonly string[]
Sets the selected value in a controlled tiles component

Tiles.Description

Extends HTMLAttributes<HTMLSpanElement>

Tiles.Icon

Extends HTMLAttributes<HTMLSpanElement>

Tiles.Label

Extends HTMLAttributes<HTMLSpanElement>

Tiles.Tile

Extends HTMLAttributes<HTMLLabelElement>

Prop nameTypeDefaultDescription
disabled
boolean
Indicates that the element is not interactive
value
string | number | readonly string[]
Sets the value of the tile