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
      • Faux input
      • Focus inset
      • Hidden label
      • Hint text
      • Media input
      • Placeholder
      • Read-only
      • Size
      • Validation
    • Configuration
    • API
      • FauxInput
      • Field
      • Input
      • MediaInput

    Input

    An Input lets users enter text into a field.

    Table of Contents
    • How to use it
      • Default
      • Disabled
      • Faux input
      • Focus inset
      • Hidden label
      • Hint text
      • Media input
      • Placeholder
      • Read-only
      • Size
      • Validation
    • Configuration
    • API
      • FauxInput
      • Field
      • Input
      • MediaInput
    Used for this
    • To let the user enter data into a field
    • To enter multiline text, use a Textarea

    How to use it

    Default

    An Input comes with a label indicating what goes into the field.

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

    Disabled

    A disabled Input prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.

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

    Faux input

    Provide input styling without native input backing.

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

    Focus inset

    Set focus styling inside the element using the focusInset prop. (Useful when an Input is flush with another component.)

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

    Hidden label

    Input labels can be hidden.

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

    Hint text

    To provide additional context, use hint text with the label.

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

    Media input

    Media elements add even more context to an input.

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

    Placeholder

    Placeholder text provides the user with example content or additional context. Use an icon to provide a visual affordance when the label is hidden (for example, search).

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

    Read-only

    A read-only Input prevents user modification but allows selection.

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

    Size

    An Input can be default or compact.

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

    Validation

    Show success, warning, and danger validation messages with the Message 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 { Input, MediaInput, Field, FauxInput } from '@zendeskgarden/react-forms'

    API

    The Input component follows this structure:

    <Field>  <Field.Label />  <Field.Hint />  <Input />  <Field.Message /></Field>

    FauxInput

    Extends HTMLAttributes<HTMLDivElement>

    Nest a FauxInput within a Field component.

    Prop nameTypeDefaultDescription
    disabled
    		boolean

    Indicates that the element is not interactive

    focusInset
    		boolean

    Applies inset box-shadow styling on focus

    isBare
    		boolean

    Removes borders and padding

    isCompact
    		boolean

    Applies compact styling

    isFocused
    		boolean

    Applies focus stying

    isHovered
    		boolean

    Applies hover stying

    readOnly
    		boolean

    Applies read-only styling

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

    Applies validation state styling

    Field

    A Field provides accessibility attributes to its child Input 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.

    Prop nameTypeDefaultDescription
    validation
    		'success' | 'warning' | 'error'

    Applies validation state styling

    validationLabel
    		string

    Defines the aria-label for the validation icon

    Input

    Extends InputHTMLAttributes<HTMLInputElement>

    Nest an Input within a Field component.

    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

    MediaInput

    Extends InputHTMLAttributes<HTMLInputElement>

    A MediaInput displays provided media elements at the start and/or end of the input. Nest it within a Field component.

    Prop nameTypeDefaultDescription
    end
    		ReactElement<any, string | JSXElementConstructor<any>>

    Accepts an "end" icon to display

    focusInset
    		boolean

    Applies inset box-shadow styling on focus

    isBare
    		boolean

    Removes borders and padding

    isCompact
    		boolean

    Applies compact styling

    start
    		ReactElement<any, string | JSXElementConstructor<any>>

    Accepts a "start" icon to display

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

    Applies validation state styling

    wrapperProps
    		any
    {}

    Applies props to the wrapping FauxInput element

    wrapperRef
    		any

    Applies a ref to the wrapping FauxInput element

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