---
id: Helper text
section: components
cssPrefix: pf-v6-c-helper-text
propComponents: ['HelperText', 'HelperTextItem']
---

import { Fragment } from 'react';
import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';

## Examples

### Basic

```ts file="HelperTextBasic.tsx"

```

### With custom icons

```ts file="HelperTextWithCustomIcon.tsx"

```

### Multiple items

You can pass multiple `<HelperTextItem>` components inside a single `<Helpertext>` container.

```ts file="HelperTextMultipleItems.tsx"

```