Skip to main content

<FeedbackForm />

This is the underlying form, which is exposed in case you need to gather feedback inline.

Example​

import React from 'react';
import { FeedbackForm } from '@availity/feedback';

const Example = () => <FeedbackForm name="Payer Space" />;

Live example: Storybook​

Props​

name?: string​

The name of the application this feedback is for. It is used in the API request to indicate where the feedback came from.

onFeedbackSent?: (feedback: FeedbackObject) => void​

Callback for when the feedback is submitted. It is called with the feedback object.

faceOptions?: object[]​

Array of Objects containing icon (String), description (String), and label (String) properties. Allows you to override the smiley face options which appear. Default: Smiley Face, Meh Face, and Frowny Face.

Previous placeholder property removed as of v6.0.0. Use label instead.

aboutOptions?: object[]​

Array of Objects containing value (String,Number) and label (String) properties. Allows a dropdown displaying the options provided to let the user indicate what the feedback is about.

aboutLabel?: node​

Label text for the dropdown created via the aboutOptions prop. Default: "This is about".

Previously aboutPlaceholder. All placeholders replaced with labels starting v6.0.0.

onClose?: () => void​

When provided, a "Close" button is rendered and onClose is excuted when it's clicked.

prompt?: string​

Text that prompts the user to provider feedback. Default: "Tell us what you think about ${appName}.".

additionalComments?: boolean​

If true, shows an optional comments field below.

staticFields?: object​

Static (non-user-entered) key/value pairs to be sent in feedback submission.

autoFocusFeedbackButton?: bool​

Default: true. When set to false, the first feedback button is not focused. This is to avoid issues with focus causing other elements to close (e.g. dropdowns)

modalHeaderProps?: ModalHeaderProps​

Props to be spread onto the <ModalHeader /> rendered inside of the <FeedbackForm />. See ModalHeader

For accessibility use className instead of tag to adjust size and style of header.

...rest​

View full set of Form Props