注目
FAQFAQ Accordion
An accessible accordion where one answer opens at a time.
#faq#accordion#disclosure
6 個のフレームワーク中級
Loading…
One outlined container with hairline dividers between the rows.
<!--
One outlined container, hairline dividers between rows. The rounded corners
live on the container, so the first and last rows clip correctly without any
per-row corner rules.
-->
<div class="acc-bordered">
<details class="acc-bordered__item" name="acc-bordered" open>
<summary class="acc-bordered__question">
How many seats are included?
<svg class="acc-bordered__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="acc-bordered__answer">
<p>Every workspace starts with five seats. Extra seats are billed pro rata for the rest of the period.</p>
</div>
</details>
<details class="acc-bordered__item" name="acc-bordered">
<summary class="acc-bordered__question">
Do you support SSO?
<svg class="acc-bordered__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="acc-bordered__answer">
<p>SAML and OIDC are available on Business and Enterprise plans, with SCIM provisioning on Enterprise.</p>
</div>
</details>
<details class="acc-bordered__item" name="acc-bordered">
<summary class="acc-bordered__question">
Where is my data stored?
<svg class="acc-bordered__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="acc-bordered__answer">
<p>In the region you pick at signup - currently Frankfurt, Virginia or Sydney. Data never leaves it.</p>
</div>
</details>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
items必須 | FaqItem[] | - | レンダリングする項目の配列。 |
defaultOpenId | string | - | マウント時に展開する項目の ID。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The radius lives on the container and `overflow-hidden` clips the rows to it, so the first and last rows round correctly without per-row corner rules - change `rounded-xl` in one place and the whole card follows. The focus ring is inset (`ring-inset`) because a standard outset ring would be clipped by that same `overflow-hidden`.