Skip to main content

<FieldHelpIcon />

FieldHelpIcon is used to add a question mark icon to a Label. It can be clicked by users to bring up more information about that field.

Example​

import React from 'react';
import { FieldHelpIcon } from '@availity/form';

const Example = () => (
  <div id="testId">
    Select A Provider <FieldHelpIcon id="provider-help" labelId="1234-6789" />
  </div>
);

Live example: Storybook​

Props​

id?: string​

Help topic ID used with the messaging api to determine what content is shown when clicked.

color?: string​

Color of the icon. Default is primary.

size?: string​

Size of the Icon. Potential values include "lg", "xl", "1x", "2x", "3x", "4x", "5x". Default is 1x

labelId?: string​

ID used on the label. Populates the aria-describedby property for accessibility.