Collapsible Card Section
A mono-uppercase collapsible trigger for hiding optional or advanced settings inside a card or panel.
Use CollapsibleCardSection to progressively disclose optional or advanced fields inside a card or panel form. The trigger is styled mono-uppercase to blend with card section headings; content animates in and out on toggle.
Loading...
import { Input } from 'ui'
import { CollapsibleCardSection } from 'ui-patterns/CollapsibleCardSection'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
export function CollapsibleCardSectionDemo() {
return (
<div className="border rounded-lg px-6 py-4 w-full max-w-lg">
<CollapsibleCardSection
title="Advanced settings"
description="These settings cannot be changed after creation"
>
<FormItemLayout
isReactForm={false}
layout="flex-row-reverse"
label="OIDC Issuer"
description="The OIDC issuer URL of your identity provider."
>
<Input placeholder="https://your-org.okta.com" />
</FormItemLayout>
</CollapsibleCardSection>
</div>
)
}Usage
import { CollapsibleCardSection } from 'ui-patterns/CollapsibleCardSection'<CollapsibleCardSection title="Advanced settings">{/* form fields */}</CollapsibleCardSection>With description
Use description to add a short qualifier below the title, only when the content needs context that the title alone doesn't provide.
<CollapsibleCardSection
title="Advanced settings"
description="These settings cannot be changed after creation"
>
{/* form fields */}
</CollapsibleCardSection>Default open
<CollapsibleCardSection title="Advanced settings" defaultOpen>
{/* form fields */}
</CollapsibleCardSection>