FAQ

Display content in a Q&A format
  • Experimental
  • Review pending by accessibility team
import {FAQ} from '@primer/react-brand'

Examples

Default

Grouped FAQs

FAQ supports content as groupings.

Use FAQ.Subheading to create a visual separation between your FAQ.Question declarations.

Using FAQ.Subheading inside FAQ will automatically change text alignment and size of FAQ.Heading. It will also adjust the underlying HTML tag from a H3 to a H2.

Rendering with dynamic data

Color customization

FAQ surfaces component-specific css variables that can be used to adjust the color where needed.

Component props

FAQ Required

NameTypeDefaultDescription
classNamestringSets a custom class
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node
childrenFAQ.Heading
FAQ.Subheading
FAQ.Item
Root element for the FAQ component.

FAQ.Heading Required

NameTypeDefaultDescription
align'start'
'center'
'center'Heading text alignment
childrenstringHeading text
classNamestringHeading custom class
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node
size'medium'
'large'
'medium'Heading text size

FAQ.Subheading

NameTypeDefaultDescription
childrenstringSub-heading text
classNamestringSub-heading custom class
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node

FAQ.Item

NameTypeDefaultDescription
openbooleanfalseSets answer visibility
classNamestringSets a custom class
childrenFAQ.Question
FAQ.Answer
FAQ question and answer pair
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node

FAQ.Question

NameTypeDefaultDescription
classNamestringSets a custom class on the root element
childrenstringQuestion text
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node

FAQ.Answer

NameTypeDefaultDescription
classNamestringSets a custom class on the root element
childrenReactElement<p> or <Text> components are recommended
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node