Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
Examples
Props
TextInputGroup
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the text input group | |
| className | string | Additional classes applied to the text input group container | |
| isDisabled | boolean | Adds disabled styling and a disabled context value which text input group main hooks into for the input itself |
TextInputGroupMain
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Type to filter' | Accessibility label for the input |
| children | React.ReactNode | Content rendered inside the text input group main div | |
| className | string | Additional classes applied to the text input group main container | |
| hint | string | Suggestion that will show up like a placeholder even with text in the input | |
| icon | React.ReactNode | Icon to be shown on the left side of the text input group main container | |
| onBlur | (event?: any) => void | Callback for when focus is lost on the input field | |
| onChange | (value: string, event: React.FormEvent<HTMLInputElement>) => void | (): any => undefined | Callback for when there is a change in the input field |
| onFocus | (event?: any) => void | Callback for when the input field is focused | |
| placeholder | string | Placeholder value for the input | |
| type | 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | 'text' | Type that the input accepts. |
| value | string | number | Value for the input |
TextInputGroupUtilities
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the text input group utilities div | |
| className | string | Additional classes applied to the text input group utilities container |
CSS variables
| .pf-c-text-input-group | --pf-c-text-input-group--BackgroundColor | #fff | |
| .pf-c-text-input-group | --pf-c-text-input-group__text--before--BorderWidth | 1px | |
| .pf-c-text-input-group | --pf-c-text-input-group__text--before--BorderColor | #f0f0f0 | |
| .pf-c-text-input-group | --pf-c-text-input-group__text--after--BorderBottomWidth | 1px | |
| .pf-c-text-input-group | --pf-c-text-input-group__text--after--BorderBottomColor | #8a8d90 | |
| .pf-c-text-input-group | --pf-c-text-input-group--hover__text--after--BorderBottomColor | #06c | |
| .pf-c-text-input-group | --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth | 2px | |
| .pf-c-text-input-group | --pf-c-text-input-group__text--focus-within--after--BorderBottomColor | #06c | |
| .pf-c-text-input-group | --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft | 0.5rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft | 2rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__text-input--PaddingTop | 0.375rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__text-input--PaddingRight | 0.5rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__text-input--PaddingBottom | 0.375rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__text-input--PaddingLeft | 0.5rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__text-input--MinWidth | 12ch | |
| .pf-c-text-input-group | --pf-c-text-input-group__text-input--m-hint--Color | #6a6e73 | |
| .pf-c-text-input-group | --pf-c-text-input-group--placeholder--Color | #6a6e73 | |
| .pf-c-text-input-group | --pf-c-text-input-group__icon--Left | 0.5rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__icon--Color | #6a6e73 | |
| .pf-c-text-input-group | --pf-c-text-input-group__text--hover__icon--Color | #151515 | |
| .pf-c-text-input-group | --pf-c-text-input-group__icon--TranslateY | -50% | |
| .pf-c-text-input-group | --pf-c-text-input-group__utilities--MarginRight | 0.5rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__utilities--MarginLeft | 0.25rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__utilities--child--MarginLeft | 0.25rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__utilities--c-button--PaddingRight | 0.25rem | |
| .pf-c-text-input-group | --pf-c-text-input-group__utilities--c-button--PaddingLeft | 0.25rem | |
| .pf-c-text-input-group | --pf-c-text-input-group--m-disabled--Color | #6a6e73 | |
| .pf-c-text-input-group | --pf-c-text-input-group--m-disabled--BackgroundColor | #f0f0f0 | |
| .pf-c-text-input-group:hover | --pf-c-text-input-group__text--after--BorderBottomColor | #06c | |
| .pf-c-text-input-group.pf-m-disabled | --pf-c-text-input-group__text--before--BorderWidth | 0 | |
| .pf-c-text-input-group.pf-m-disabled | --pf-c-text-input-group__text--after--BorderBottomWidth | 0 | |
| .pf-c-text-input-group.pf-m-disabled | --pf-c-text-input-group--Color | #6a6e73 | |
| .pf-c-text-input-group.pf-m-disabled | --pf-c-text-input-group__icon--Color | #6a6e73 | |
| .pf-c-text-input-group.pf-m-disabled | --pf-c-text-input-group--BackgroundColor | #f0f0f0 | |
| .pf-c-text-input-group.pf-m-plain | --pf-c-text-input-group--BackgroundColor | transparent | |
| .pf-c-text-input-group__main.pf-m-icon | --pf-c-text-input-group__text-input--PaddingLeft | 2rem | |
| .pf-c-text-input-group__text:hover | --pf-c-text-input-group__icon--Color | #151515 | |
| .pf-c-text-input-group__text:focus-within | --pf-c-text-input-group__text--after--BorderBottomWidth | 2px | |
| .pf-c-text-input-group__text:focus-within | --pf-c-text-input-group__text--after--BorderBottomColor | #06c | |
| .pf-c-text-input-group__utilities .pf-c-button | --pf-c-button--PaddingRight | 0.25rem | |
| .pf-c-text-input-group__utilities .pf-c-button | --pf-c-button--PaddingLeft | 0.25rem | |
View source on GitHub
