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.
Toggle RTL
Copy code
View code
Read-only
Field content can be made read-only.
Toggle RTL
Copy code
View code
Disabled
A disabled Input group prevents user interaction.
Toggle RTL
Copy code
View code
Size
Input group comes in two sizes: default and compact.
Toggle RTL
Copy code
View code
Button placement
Buttons can be placed before or after the input.
Toggle RTL
Copy code
View code
Configuration
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom prop-types styled-components @zendeskgarden/react-theming
- Importimport { InputGroup } from '@zendeskgarden/react-forms'
API
InputGroup
| Prop name | Type | Default | Description |
|---|---|---|---|
isCompact | boolean | – | Apply compact styling |