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
        • Checkbox
        • Combobox
        • File upload
        • Input
        • Input group
        • Radio
        • Range
        • Select
        • Textarea
        • Toggle
      • 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
      • Disabled
      • Files
      • Size
      • Validation
    • Configuration
    • API
      • Field
      • File
      • FileList
      • FileUpload
      • Input

    File upload

    File upload lets users select and upload files.

    Table of Contents
    • How to use it
      • Default
      • Disabled
      • Files
      • Size
      • Validation
    • Configuration
    • API
      • Field
      • File
      • FileList
      • FileUpload
      • Input
    Used for this
    • To let users attach a file or image to something else
    • To let users add images to their avatars

    How to use it

    Default

    Users drag and drop files on to the target or click to select which files to upload.

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

    Disabled

    A disabled File upload prevents user interaction. It doesn’t appear in the tab order and can’t receive focus.

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

    Files

    A File can have an icon and be dismissed. Files work together with a Progress loader to show upload status. Use in combination with FileList to display a list of files.

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

    Size

    File upload can be default or compact.

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

    Validation

    Show success and error validation with the File component.

    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 { FileUpload, Input, Field, FileList, File } from '@zendeskgarden/react-forms'

    API

    The FileUpload component follows this structure:

    <Field>  <Field.Label />  <Field.Hint />  <FileUpload>    <Input />  </FileUpload></Field><FileList>  <FileList.Item>    <File>      <File.Close />      <Progress />    </File>  </FileList.Item>  {/* etc. */}</FileList>

    Field

    A Field provides accessibility attributes to its child FileUpload field by associating it with the corresponding Field.Label and Field.Hint.

    Field.Hint

    Extends HTMLAttributes<HTMLDivElement>

    Nest the Hint within a Field component.

    Field.Label

    Extends LabelHTMLAttributes<HTMLLabelElement>

    Nest the Label within a Field component.

    Prop nameTypeDefaultDescription
    hidden
    		boolean

    Hides the label visually without hiding it from screen readers

    isRegular
    		boolean

    Applies regular (non-bold) font weight

    Field.Message

    Extends HTMLAttributes<HTMLDivElement>

    The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.

    File

    Extends HTMLAttributes<HTMLDivElement>

    The File component displays an icon based on the provided type, or a generic one when type is not specified. In case of multiple File components, nest each within an Item component.

    Prop nameTypeDefaultDescription
    focusInset
    		boolean

    Applies inset box-shadow styling on focus

    isCompact
    		boolean

    Applies compact styling

    type
    		'document' | 'presentation' | 'image' | 'pdf' | 'zip' | 'spreadsheet' | 'generic'

    Determines the icon to display

    validation
    		'success' | 'error'

    Applies validation state styling

    File.Close

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    File.Delete

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    FileList

    Extends HTMLAttributes<HTMLUListElement>

    Use the FileList component when displaying a list of multiple files.

    FileList.Item

    Extends LiHTMLAttributes<HTMLLIElement>

    Nest an Item within a FileList component.

    FileUpload

    Extends HTMLAttributes<HTMLDivElement>

    The FileUpload component works together with a library like react-dropzone. Nest it within a Field component.

    Prop nameTypeDefaultDescription
    disabled
    		boolean

    Indicates that the element is not interactive

    isCompact
    		boolean

    Applies compact styling

    isDragging
    		boolean

    Applies drag styling

    Input

    Extends InputHTMLAttributes<HTMLInputElement>

    Nest the Input within the FileUpload component. See default example usage.

    Prop nameTypeDefaultDescription
    focusInset
    		boolean

    Applies inset box-shadow styling on focus

    isBare
    		boolean

    Removes borders and padding

    isCompact
    		boolean

    Applies compact styling

    validation
    		'success' | 'warning' | 'error'

    Applies validation state styling

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