> ## Documentation Index
> Fetch the complete documentation index at: https://learn.mintlify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components for API documentation

> Document parameters, response fields, nested objects, and request examples with components designed for API reference.

export const Quiz = ({question, answers, correctFeedback, incorrectFeedback}) => {
  const [selected, setSelected] = React.useState(null);
  const [checked, setChecked] = React.useState(false);
  const quizId = React.useId();
  const isCorrect = checked && answers[selected]?.correct;
  const reset = () => {
    setSelected(null);
    setChecked(false);
  };
  return <div className={"quiz-container" + (checked ? " quiz-checked" : "")}>
      <Badge color="green">Quiz</Badge>
      <p className="quiz-question" id={quizId + "-question"}>{question}</p>
      <div className="quiz-options" role="radiogroup" aria-labelledby={quizId + "-question"} aria-disabled={checked}>
        {answers.map((answer, i) => <label key={i} className={["quiz-option", !checked && selected === i ? "quiz-option-selected" : "", checked && answer.correct ? "quiz-option-correct" : "", checked && selected === i && !answer.correct ? "quiz-option-incorrect" : ""].filter(Boolean).join(" ")}>
            <input type="radio" name={"quiz-" + quizId} checked={selected === i} onChange={() => !checked && setSelected(i)} disabled={checked} />
            <span className="quiz-radio" />
            <span className="quiz-option-label">{answer.text}</span>
          </label>)}
      </div>
      {checked && <div className={"quiz-feedback " + (isCorrect ? "quiz-feedback-correct" : "quiz-feedback-incorrect")} role="status" aria-live="polite" aria-atomic="true">
          <span className="quiz-feedback-icon">{isCorrect ? "✓" : "✗"}</span>
          {isCorrect ? correctFeedback : incorrectFeedback}
        </div>}
      <div className="quiz-actions">
        {!checked ? <button className="quiz-btn quiz-btn-check" type="button" onClick={() => selected !== null && setChecked(true)} disabled={selected === null}>
            Check answer
          </button> : <button className="quiz-btn quiz-btn-reset" type="button" onClick={reset}>
            Try again
          </button>}
      </div>
    </div>;
};

Someone reading an API reference usually arrives with a specific question like "Is this parameter required?" or "What type does this field return?" or "What does a successful response look like?"

Mintlify's API components put those answers in predictable places. Readers can scan the page instead of digging through paragraphs or decoding a hand-built table.

## Document request parameters

Use `<ParamField>` for path, query, body, and header parameters. The prop identifies where the parameter belongs. Add its type and whether it is required, then describe any limits a reader could otherwise miss.

```mdx theme={null}
<ParamField query="limit" type="number" default="20">
  Maximum number of users to return. Accepts values from 1 to 100.
</ParamField>

<ParamField header="Authorization" type="string" required>
  Bearer token in the format `Bearer YOUR_API_KEY`.
</ParamField>
```

Don't make readers guess about allowed values, formats, units, or limits. “The number of results” leaves questions. “Maximum results per page, from 1 to 100” answers them.

## Describe response fields

Use `<ResponseField>` for values returned by the API:

```mdx theme={null}
<ResponseField name="created_at" type="string" required>
  ISO 8601 timestamp for when the user was created.
</ResponseField>
```

For a nested object, put an `<Expandable>` inside its parent field. Readers can see that `id` and `email` belong to `user` without having every child property open by default.

```mdx theme={null}
<ResponseField name="user" type="object">
  The newly created user.

  <Expandable title="properties">
    <ResponseField name="id" type="string" required>
      Unique identifier for the user.
    </ResponseField>
    <ResponseField name="email" type="string" required>
      Primary email address for the user.
    </ResponseField>
  </Expandable>
</ResponseField>
```

Use expandables for this kind of nested reference data. If you're hiding optional explanation rather than child properties, use an accordion.

## Pair requests with responses

`<RequestExample>` and `<ResponseExample>` show the complete exchange in the page's side panel. Start with a successful request, then add the error responses readers are likely to encounter.

````mdx theme={null}
<RequestExample>
  ```bash cURL
  curl https://api.example.com/users \
    -H "Authorization: Bearer YOUR_API_KEY"
  ```
</RequestExample>

<ResponseExample>
  ```json 200 OK
  {
    "id": "usr_123",
    "email": "ada@example.com"
  }
  ```
</ResponseExample>
````

Check examples against the field documentation whenever the API changes. A field marked as required shouldn't be missing from the example, and a renamed field shouldn't survive in an old response block.

## Generated reference versus hand-written reference

If you have an OpenAPI document, let it define the endpoint structure. Add hand-written guidance for the parts a schema can't explain well: why someone would choose an option, how a workflow fits together, or what to do when a request fails.

Try not to define the same field by hand in several places. When its type or behavior changes, one of those copies will eventually be missed.

<Quiz
  question="An API response contains an address object with six child properties. Which components represent that structure best?"
  answers={[
{ text: "A flat list of six ResponseFields after the parent field", correct: false },
{ text: "A ResponseField with an Expandable containing the child ResponseFields", correct: true },
{ text: "A Markdown table with the parent and child fields mixed together", correct: false },
{ text: "A ResponseExample only, without documenting the individual fields", correct: false },
]}
  correctFeedback="Right. Start with the address ResponseField, then place its six child ResponseFields inside an Expandable. The structure stays visible without opening every property by default."
  incorrectFeedback="The child fields need to stay visibly connected to the address object. Put their ResponseFields inside an Expandable nested within the parent ResponseField."
/>

Next up: [Images, frames, and diagrams](/courses/components/visual-content) — add visual context that explains a task or relationship.
