---
title: FAQ
description: Use the FAQ component to display content in a Q&A format.
keywords: ['content', 'questions', 'answers']
ready: true
figma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=375%3A8130
source: https://github.com/primer/brand/blob/main/packages/react/src/FAQ/FAQ.tsx
storybook: '/brand/storybook/?path=/story/components-faq--default'
---

```js
import {FAQ, FAQGroup} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<>
  <FAQ>
    <FAQ.Heading>Frequently asked questions</FAQ.Heading>
    <FAQ.Item>
      <FAQ.Question>What&apos;s included in the GitHub for Startups offer?</FAQ.Question>
      <FAQ.Answer>
        <p>
          All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
          off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
          <a href="https://www.github.com" target="_blank" rel="noreferrer">
            here
          </a>
          .
        </p>
      </FAQ.Answer>
    </FAQ.Item>
    <FAQ.Item>
      <FAQ.Question>Who is eligible to apply?</FAQ.Question>
      <FAQ.Answer>
        <p>Startups who meet the following criteria are eligible to apply for the program:</p>
        <ol>
          <li>
            <Text size="300" variant="muted">
              Must be associated with a current GitHub for Startups partner.
            </Text>
          </li>
          <li>
            <Text size="300" variant="muted">
              Self-funded or funded (Seed-Series A)
            </Text>
          </li>
          <li>
            <Text size="300" variant="muted">
              Not a current GitHub Enterprise customer
            </Text>
          </li>
          <li>
            <Text size="300" variant="muted">
              Must not have previously received credits for GitHub Enterprise
            </Text>
          </li>
        </ol>
      </FAQ.Answer>
    </FAQ.Item>
    <FAQ.Item>
      <FAQ.Question>What if my startup is not eligible? Are there other resources for me?</FAQ.Question>
      <FAQ.Answer>
        <p>
          If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
          feel to sign up for a trial
          <a href="https://www.github.com" target="_blank" rel="noreferrer">
            here
          </a>
          {''}.
        </p>
      </FAQ.Answer>
    </FAQ.Item>
    <FAQ.Item>
      <FAQ.Question>How can my organization become a GitHub for Startups partner?</FAQ.Question>
      <FAQ.Answer>
        <p>
          Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
          program.
        </p>
        <p>
          <a href="https://www.github.com" target="_blank" rel="noreferrer">
            Apply here
          </a>
          .
        </p>
      </FAQ.Answer>
    </FAQ.Item>
  </FAQ>
</>
```

### Grouped FAQs

Use `FAQGroup` to display multiple `FAQ` components together.

Use `tabAttributes` to add arbitrary attributes to the tabs. This can be useful for tracking analytics or adding custom attributes.

```jsx
<div style={{width: '100%'}}>
  <FAQGroup
    tabAttributes={(children, i) => ({
      'data-analytics': `faq-tab-${i}`,
    })}
  >
    <FAQGroup.Heading>
      Frequently asked <br /> questions
    </FAQGroup.Heading>
    <FAQ>
      <FAQ.Heading>Using GitHub Enterprise</FAQ.Heading>
      <FAQ.Item>
        <FAQ.Question>What is GitHub Enterprise?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
      <FAQ.Item>
        <FAQ.Question>How can GitHub Enterprise be deployed?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
      <FAQ.Item>
        <FAQ.Question>What is GitHub Enterprise Cloud?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
    </FAQ>

    <FAQ>
      <FAQ.Heading>About GitHub Enterprise</FAQ.Heading>
      <FAQ.Item>
        <FAQ.Question>What is the difference between GitHub and GitHub Enterprise?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
      <FAQ.Item>
        <FAQ.Question>Why should organizations use GitHub Enterprise?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
      <FAQ.Item>
        <FAQ.Question>Who uses GitHub Enterprise?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
    </FAQ>
  </FAQGroup>
</div>
```

### GridLine variant

Use `variant="gridline"` on both `FAQ` and `FAQGroup` to apply an alternative visual style.

```jsx
<div style={{width: '100%'}}>
  <FAQGroup variant="gridline">
    <FAQGroup.Heading>
      Frequently asked <br /> questions
    </FAQGroup.Heading>
    <FAQ variant="gridline">
      <FAQ.Heading>Using GitHub Enterprise</FAQ.Heading>
      <FAQ.Item>
        <FAQ.Question>What is GitHub Enterprise?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
      <FAQ.Item>
        <FAQ.Question>How can GitHub Enterprise be deployed?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
    </FAQ>
    <FAQ variant="gridline">
      <FAQ.Heading>About GitHub Enterprise</FAQ.Heading>
      <FAQ.Item>
        <FAQ.Question>What is the difference between GitHub and GitHub Enterprise?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
      <FAQ.Item>
        <FAQ.Question>Why should organizations use GitHub Enterprise?</FAQ.Question>
        <FAQ.Answer>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
            turpis felis nam pulvinar risus elementum.
          </p>
        </FAQ.Answer>
      </FAQ.Item>
    </FAQ>
  </FAQGroup>
</div>
```

### Rendering with dynamic data

```jsx filename="noinline"
const App = () => {
  const fixtureData = [
    {
      question: 'How do I render a single paragraph?',
      answer: (
        <p>
          Vestibulum at dolor justo.{' '}
          <a href="https://www.github.com" target="_blank" rel="noreferrer">
            Curabitur
          </a>{' '}
          dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada et
          non eros.
        </p>
      ),
    },
    {
      question: 'What about multiple paragraphs?',
      answer: (
        <React.Fragment>
          <p>
            Vestibulum at dolor justo.{' '}
            <a href="https://www.github.com" target="_blank" rel="noreferrer">
              Curabitur
            </a>{' '}
            dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada
            et non eros.
          </p>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </React.Fragment>
      ),
    },
    {
      question: 'Can I render a React Fragment?',
      answer: (
        <React.Fragment>
          <p>
            Vestibulum at dolor justo.{' '}
            <a href="https://www.github.com" target="_blank" rel="noreferrer">
              Curabitur
            </a>{' '}
            dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada
            et non eros.
          </p>
          <ol>
            <li>
              <Text size="300" variant="muted">
                Must be associated with a current GitHub for Startups partner.
              </Text>
            </li>
            <li>
              <Text size="300" variant="muted">
                Self-funded or funded (Seed-Series A)
              </Text>
            </li>
            <li>
              <Text size="300" variant="muted">
                Not a current GitHub Enterprise customer
              </Text>
            </li>
            <li>
              <Text size="300" variant="muted">
                Must not have previously received credits for GitHub Enterprise
              </Text>
            </li>
          </ol>
        </React.Fragment>
      ),
    },
  ]

  return (
    <FAQ>
      <FAQ.Heading>Frequently asked questions</FAQ.Heading>
      <>
        {fixtureData.map(({question, answer}) => {
          return (
            <FAQ.Item key={question} open={false}>
              <FAQ.Question>{question}</FAQ.Question>
              <FAQ.Answer>{answer}</FAQ.Answer>
            </FAQ.Item>
          )
        })}
      </>
    </FAQ>
  )
}

render(<App />)
```

### Toggle color customization

`FAQ.Question` toggle colors can be adjusted using one of the following approaches:

1. Override the global `--brand-color-accent-primary` CSS variable (recommended).
2. Use the `toggleColor` prop on `FAQ.Question`.

Available options for `toggleColor` are:

`AccordionToggleColors`

See Storybook for all color options.

```jsx filename="noinline"
const App = () => {
  const customStyles = `
  .custom-heading {
    background: linear-gradient(271.72deg, var(--brand-Accordion-toggle-color-green-blue-start) 7.09%, var(--brand-Accordion-toggle-color-green-blue-end) 96.61%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
`

  return (
    <ThemeProvider colorMode="dark" className="custom-colors">
      <Box padding="spacious" backgroundColor="default">
        <style>{customStyles}</style>
        <FAQ>
          <FAQ.Heading className="custom-heading">Frequently asked questions</FAQ.Heading>
          <FAQ.Subheading>Subscriptions & Payments</FAQ.Subheading>
          <FAQ.Item>
            <FAQ.Question toggleColor="green-blue">
              What are the differences between GitHub Free, GitHub Pro, GitHub Team and GitHub Enterprise plans?
            </FAQ.Question>
            <FAQ.Answer>
              <p>
                GitHub Free is our basic plan created for individuals and small teams to collaborate on private and
                public repositories.
              </p>
            </FAQ.Answer>
          </FAQ.Item>
          <FAQ.Item>
            <FAQ.Question toggleColor="green-blue">How do I view and manage my subscription?</FAQ.Question>
            <FAQ.Answer>
              <p>
                You can view your account's subscription, your other paid features and products, and your next billing
                date in your account's billing settings.
              </p>
            </FAQ.Answer>
          </FAQ.Item>
          <FAQ.Item>
            <FAQ.Question toggleColor="green-blue">How can I change my GitHub subscription?</FAQ.Question>
            <FAQ.Answer>
              <p>
                You can upgrade or downgrade your subscription, add and remove seats, or change the billing cadence on
                https://github.com/settings/billing.
              </p>
            </FAQ.Answer>
          </FAQ.Item>
        </FAQ>
      </Box>
    </ThemeProvider>
  )
}

render(<App />)
```

## Component props

### FAQ `Required`

| Name        | Type                                              |   Default   | Description                              |
| :---------- | :------------------------------------------------ | :---------: | :--------------------------------------- |
| `className` | `string`                                          |             | Sets a custom class                      |
| `id`        | `string`                                          |             | Sets a custom id                         |
| `ref`       | `React.RefObject`                                 |             | Forward a Ref to the underlying DOM node |
| `children`  | `'FAQ.Heading' \| 'FAQ.Subheading' \| 'FAQ.Item'` |             | Root element for the FAQ component.      |
| `variant`   | `'default' \| 'gridline'`                         | `'default'` | Sets the visual variant of the FAQ.      |

### FAQ.Heading `Required`

| Name          | Type                    |   Default  | Description                              |
| :------------ | :---------------------- | :--------: | :--------------------------------------- |
| `align`       | `'start' \| 'center'`   | `'center'` | Heading text alignment                   |
| `children`    | `string`                |            | Heading text                             |
| `className`   | `string`                |            | Heading custom class                     |
| `id`          | `string`                |            | Sets a custom id                         |
| `ref`         | `React.RefObject`       |            | Forward a Ref to the underlying DOM node |
| `size`        | `'medium' \| 'large'`   | `'medium'` | Heading text size                        |
| `as`          | `HeadingTags`           |            | Applies the underlying HTML element      |
| `toggleColor` | `AccordionToggleColors` |            | Sets the accordion toggle color          |

### FAQ.Subheading

| Name        | Type              | Default | Description                              |
| :---------- | :---------------- | :-----: | :--------------------------------------- |
| `children`  | `string`          |         | Sub-heading text                         |
| `className` | `string`          |         | Sub-heading custom class                 |
| `id`        | `string`          |         | Sets a custom id                         |
| `as`        |                   |  `'h3'` | Applies the underlying HTML element      |
| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node |

### FAQ.Item

| Name        | Type                             | Default | Description                              |
| :---------- | :------------------------------- | :-----: | :--------------------------------------- |
| `open`      | `boolean`                        | `false` | Sets answer visibility                   |
| `className` | `string`                         |         | Sets a custom class                      |
| `children`  | `'FAQ.Question' \| 'FAQ.Answer'` |         | FAQ question and answer pair             |
| `id`        | `string`                         |         | Sets a custom id                         |
| `ref`       | `React.RefObject`                |         | Forward a Ref to the underlying DOM node |

### FAQ.Question

| Name        | Type              |   Default  | Description                              |
| :---------- | :---------------- | :--------: | :--------------------------------------- |
| `className` | `string`          |            | Sets a custom class on the root element  |
| `children`  | `string`          |            | Question text                            |
| `id`        | `string`          |            | Sets a custom id                         |
| `as`        |                   |   `'h4'`   | Applies the underlying HTML element      |
| `weight`    | `HeadingWeights`  | `'normal'` | Sets the font weight of the question     |
| `ref`       | `React.RefObject` |            | Forward a Ref to the underlying DOM node |

### FAQ.Answer

| Name        | Type              | Default | Description                                  |
| :---------- | :---------------- | :-----: | :------------------------------------------- |
| `className` | `string`          |         | Sets a custom class on the root element      |
| `children`  | `ReactElement`    |         | `<p>` or `<Text>` components are recommended |
| `id`        | `string`          |         | Sets a custom id                             |
| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node     |

### FAQGroup

| Name            | Type                                                                 |   Default   | Description                                                                   |
| :-------------- | :------------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------- |
| `className`     | `string`                                                             |             | Sets a custom class                                                           |
| `id`            | `string`                                                             |             | Sets a custom id                                                              |
| `ref`           | `React.RefObject`                                                    |             | Forward a Ref to the underlying DOM node                                      |
| `children`      | `'FAQ' \| 'FAQGroup.Heading'`                                        |             | Root element for the FAQGroup component.                                      |
| `variant`       | `'default' \| 'gridline'`                                            | `'default'` | Sets the visual variant of the FAQGroup.                                      |
| `tabAttributes` | `(children: ReactElement, index: number) => Record<string, unknown>` |             | Spreads the returned attributes onto the tab that's rendered by the FAQGroup. |

### FAQGroup.Heading

| Name | Type          | Default | Description                         |
| :--- | :------------ | :-----: | :---------------------------------- |
| `as` | `HeadingTags` |         | Applies the underlying HTML element |

Forwards all the props from the [Heading component](../../typography/Heading/index.md), including `size`, and `weight`.