diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md index 0dbf2094410..159282e4837 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md @@ -10,22 +10,32 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; ## Examples -### Basic +### Basic text input group + +A basic text input group updates its contents as users enter text. ```ts file="./TextInputGroupBasic.tsx" ``` -### Disabled +### Disabled text input group + +To prevent users from making edits to a text input group, you can disable it using `isDisabled`. ```ts file="./TextInputGroupDisabled.tsx" ``` -### Utilities and icon +### With icon and utilities + +To help users identify the purpose of an input group, you can add an icon. To do this, import your icon and pass it to `icon` within ``. + +You can also add additional actions or utilities via ``. The following example includes a clear button that allows users to remove their previous input. ```ts file="./TextInputGroupUtilitiesAndIcon.tsx" ``` -### Filters +### With filters + +When a text input group is used within a data view, like a table, you can nest filter labels within the group. To do this, pass a `` to ``, with all of the labels that a user has selected. Users can interact with these labels as needed. ```ts file="./TextInputGroupFilters.tsx" ```