Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
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
      • Button placement
      • Disabled
      • Read-only
      • Size
    • Configuration
    • API
      • InputGroup

    Input group

    An Input group combines two components, a Button and an Input, to let users take quick action on entered information.

    Table of Contents
    • How to use it
      • Default
      • Button placement
      • Disabled
      • Read-only
      • Size
    • Configuration
    • API
      • InputGroup
    Used for this
    • To let users select data in a field
    • To let users copy data in a field
    Not for this
    • To submit a form, separate your Buttons from your Inputs

    How to use it

    Default

    The basic usage of an Input group component.

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

    Button placement

    Buttons can be placed before or after the input.

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

    Disabled

    A disabled Input group prevents user interaction.

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

    Read-only

    Field content can be made read-only.

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

    Size

    Input group comes in two sizes: default and compact.

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

    Configuration

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

    API

    The InputGroup component follows this structure:

    <Field>  <Field.Label />  <Field.Hint />  <InputGroup /></Field>

    InputGroup

    Extends HTMLAttributes<HTMLDivElement>

    An InputGroup provides styles for grouping child inputs and buttons together. Nest an InputGroup within a Field component.

    Prop nameTypeDefaultDescription
    isCompact
    		boolean

    Applies compact styling

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