Accordion

Reveal related optional content without leaving the current view.

Default

One item open at a time: opening an item closes the other. Pass defaultValue to open items on first render.

Pick the voice, accent and speaking rate your agent uses on calls.

import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@smallest-inc/ui";

export default function AccordionDefault() {
  return (
    <div className="w-full max-w-lg">
      <Accordion defaultValue={["voice"]}>
        <AccordionItem value="voice">
          <AccordionHeader>
            <AccordionTrigger>Voice and language</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Pick the voice, accent and speaking rate your agent uses on calls.</AccordionPanel>
        </AccordionItem>
        <AccordionItem value="knowledge">
          <AccordionHeader>
            <AccordionTrigger>Knowledge base</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Attach documents and URLs the agent can quote when callers ask questions.</AccordionPanel>
        </AccordionItem>
        <AccordionItem value="handoff">
          <AccordionHeader>
            <AccordionTrigger>Human handoff</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Transfer the call to a teammate when the caller asks for a person.</AccordionPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

Multiple

Pass type="multiple" when each section can be reviewed on its own and several may stay open.

Manage your plan, invoices and billing contacts.

Invite and manage the people who can access this workspace.

import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@smallest-inc/ui";

export default function AccordionMultiple() {
  return (
    <div className="w-full max-w-lg">
      <Accordion type="multiple" defaultValue={["billing", "members"]}>
        <AccordionItem value="billing">
          <AccordionHeader>
            <AccordionTrigger>Billing</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Manage your plan, invoices and billing contacts.</AccordionPanel>
        </AccordionItem>
        <AccordionItem value="members">
          <AccordionHeader>
            <AccordionTrigger>Members</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Invite and manage the people who can access this workspace.</AccordionPanel>
        </AccordionItem>
        <AccordionItem value="api-keys">
          <AccordionHeader>
            <AccordionTrigger>API keys</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Create and revoke keys for the Smallest API.</AccordionPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

Sizes

Set size on AccordionTrigger. sm is 40px tall for dense settings panels; md (44px) is the default.

import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@smallest-inc/ui";

export default function AccordionSizes() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-6">
      <Accordion>
        <AccordionItem value="retries">
          <AccordionHeader>
            <AccordionTrigger size="sm">Retry policy</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Call back unanswered numbers up to three times, an hour apart.</AccordionPanel>
        </AccordionItem>
        <AccordionItem value="hours">
          <AccordionHeader>
            <AccordionTrigger size="sm">Calling hours</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Only dial between 9am and 6pm in the recipient’s time zone.</AccordionPanel>
        </AccordionItem>
      </Accordion>
      <Accordion>
        <AccordionItem value="retries">
          <AccordionHeader>
            <AccordionTrigger size="md">Retry policy</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Call back unanswered numbers up to three times, an hour apart.</AccordionPanel>
        </AccordionItem>
        <AccordionItem value="hours">
          <AccordionHeader>
            <AccordionTrigger size="md">Calling hours</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Only dial between 9am and 6pm in the recipient’s time zone.</AccordionPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

Disabled

Pass disabled to an AccordionItem to keep it closed and dim its trigger.

import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@smallest-inc/ui";

export default function AccordionDisabled() {
  return (
    <div className="w-full max-w-lg">
      <Accordion>
        <AccordionItem value="recording">
          <AccordionHeader>
            <AccordionTrigger>Call recording</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Store a recording and transcript of every call for 30 days.</AccordionPanel>
        </AccordionItem>
        <AccordionItem value="sso" disabled>
          <AccordionHeader>
            <AccordionTrigger>Single sign-on (Enterprise plan)</AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>Require members to sign in through your identity provider.</AccordionPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

Best practices

When to use

Use for related, optional content people can reveal without leaving the page, such as advanced agent settings or FAQ answers.
Do not hide required form fields or the next step in an Accordion; use a page, Dialog or Stepper for work that needs sustained attention.

Behavior

The default type="single" keeps one item open. Use type="multiple" only when people compare or review sections independently.
Open the item people most likely need with defaultValue, for example defaultValue={["voice"]}.
Use size="sm" (40px) in dense settings panels and the default md (44px) elsewhere; do not mix sizes in one Accordion.
Pass disabled to an AccordionItem for a section that is unavailable on the current plan, and say why in the trigger label.

Content

Triggers are short sentence-case nouns (“Human handoff”, “Calling hours”), not questions or full sentences.
Keep panel text to a sentence or two; link out for anything longer.

Accessibility

Always wrap AccordionTrigger in AccordionHeader so the trigger is announced as a heading-level button.
Keep each trigger directly before its panel in reading and keyboard order.

PreviousEasings NextAlert Dialog