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
Used for this
- To let users select data in a field
- To let users copy data in a field
How to use it
Default
The basic usage of an Input group component.
Button placement
Buttons can be placed before or after the input.
Disabled
A disabled Input group prevents user interaction.
Read-only
Field content can be made read-only.
Size
Input group comes in two sizes: default and compact.
Configuration
- Name8.73.2•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><Label /><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 name | Type | Default | Description |
|---|---|---|---|
isCompact | boolean | – | Applies compact styling |