Examples
With popover
using appendTo with ref to the InputGroup for the Popover so that the popover width will depend on the whole input group
Props
InputGroup
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the input group. | |
| className | string | Additional classes added to the input group. |
InputGroupItem
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the input group item. | |
| className | string | Additional classes added to the input group item. | |
| isBox | boolean | false | Enables box styling to the input group item |
| isDisabled | boolean | Flag to indicate if the input group item is disabled. | |
| isFill | boolean | false | Flag to indicate if the input group item should fill the available horizontal space |
| isPlain | boolean | Flag to indicate if the input group item is plain. |
InputGroupText
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the input group text. | |
| className | string | Additional classes added to the input group text. | |
| component | React.ReactNode | 'span' | Component that wraps the input group text. |
| isDisabled | boolean | Flag to indicate if the input group text is disabled. | |
| isPlain | boolean | Flag to to indicate if the input group item is plain. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-input-group | --pf-v6-c-input-group--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--offset | 1px | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--BorderWidth--base | 1px | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--BorderColor--base | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--BackgroundColor | transparent | ||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--AlignItems | start | ||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderBlockStartColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderInlineEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderInlineStartColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-plain--BackgroundColor | transparent | ||
| .pf-v6-c-input-group | --pf-v6-c-input-group__text--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__text--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-disabled__text--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group__item.pf-m-box | --pf-v6-c-input-group__item--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-input-group__item.pf-m-plain | --pf-v6-c-input-group__item--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-input-group__item.pf-m-disabled | --pf-v6-c-input-group__item--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group__item.pf-m-disabled | --pf-v6-c-input-group__text--Color | (In light theme) #4d4d4d | ||
| ||||