Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Description
      • Disabled
      • Layout
    • Configuration
    • API
      • Tiles

    Tiles

    Tiles are Radio buttons styled with icons or images.

    Table of Contents
    • How to use it
      • Default
      • Description
      • Disabled
      • Layout
    • Configuration
    • API
      • Tiles
    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.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Description

    A description adds additional context to the Tile label.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Disabled

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

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Layout

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

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.4.0•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

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024