Disclosure

Design guidelines

Disclosures are expandable areas of content that are summarized or otherwise labeled to indicate what they relate to. There is a trigger that must be manually selected which allows the user to show and hide the additional content that is available.

Code

Framework

HTML

React

Angular

Default

Click the component to disclose its content.

Content of the disclosure is now shown

Toggle dark mode

<certara-disclosure summary="Label">Content of the disclosure is now shown</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Label">Content of the disclosure is now shown</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Label">Content of the disclosure is now shown</certara-disclosure>

Open

Disclosure can be set to be open by default

Toggle dark mode

<certara-disclosure summary="Open" open>
  Disclosure can be set to be open by default
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Open" open>
  Disclosure can be set to be open by default
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Open" open>
  Disclosure can be set to be open by default
</certara-disclosure>

Arrow at end

The disclosure arrow shows at the end of the opener

Toggle dark mode

<certara-disclosure summary="Arrow at end" arrow-end>
  The disclosure arrow shows at the end of the opener
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Arrow at end" arrowEnd>
  The disclosure arrow shows at the end of the opener
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Arrow at end" arrow-end>
  The disclosure arrow shows at the end of the opener
</certara-disclosure>

Has padding

Content is padded to be flush with the opener

Toggle dark mode

<certara-disclosure summary="Has padding" layout="indented">
  Content is padded to be flush with the opener
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Has padding" layout="indented">
  Content is padded to be flush with the opener
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Has padding" layout="indented">
  Content is padded to be flush with the opener
</certara-disclosure>

With description

Additional descriptive text is available within a description prop

Toggle dark mode

<certara-disclosure summary="With description" description="Descriptive text can be shown below the summary">
  Additional descriptive text is available within a
  <code>description</code>
  prop
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="With description" description="Descriptive text can be shown below the summary">
  Additional descriptive text is available within a
  <code>description</code>
  prop
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="With description" description="Descriptive text can be shown below the summary">
  Additional descriptive text is available within a
  <code>description</code>
  prop
</certara-disclosure>

InnerClassName

Content has an inner classname

Toggle dark mode

<certara-disclosure summary="Has padding" open inner-class-name="border-top">
  Content has an inner classname
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Has padding" open innerClassName="border-top">
  Content has an inner classname
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Has padding" open inner-class-name="border-top">
  Content has an inner classname
</certara-disclosure>

No hover

Suppress the default hover by setting hasHover="false"

Toggle dark mode

<certara-disclosure summary="No hover" has-hover="false">
  Suppress the default hover by setting
  <code>hasHover="false"</code>
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="No hover" hasHover={false}>
  Suppress the default hover by setting
  <code>hasHover="false"</code>
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="No hover" has-hover="false">
  Suppress the default hover by setting
  <code>hasHover="false"</code>
</certara-disclosure>

Slots

Summary slot

Custom summary

More complex formatting is available within a slot="custom-summary" element

Toggle dark mode

<certara-disclosure>
  <div slot="custom-summary">
    <h3>
      <certara-icon icon="bell" role="presentation"></certara-icon>
      Custom summary
    </h3>
  </div>
  More complex formatting is available within a
  <code>slot="custom-summary"</code>
  element
</certara-disclosure>

import { CertaraDisclosure, CertaraIcon } from '@certara/certara-ui-react';

<CertaraDisclosure>
  <div slot="custom-summary">
    <h3>
      <CertaraIcon icon="bell" role="presentation" />
      Custom summary
    </h3>
  </div>
  More complex formatting is available within a
  <code>slot="custom-summary"</code>
  element
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure>
  <div slot="custom-summary">
    <h3>
      <certara-icon icon="bell" role="presentation"></certara-icon>
      Custom summary
    </h3>
  </div>
  More complex formatting is available within a
  <code>slot="custom-summary"</code>
  element
</certara-disclosure>

Description slot

This description has rich formatting

More complex formatting is available within a slot="custom-description" element

Toggle dark mode

<certara-disclosure summary="Custom description">
  <div slot="custom-description">
    This
    <code>description</code>
    has rich formatting
  </div>
  More complex formatting is available within a
  <code>slot="custom-description"</code>
  element
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Custom description">
  <div slot="custom-description">
    This
    <code>description</code>
    has rich formatting
  </div>
  More complex formatting is available within a
  <code>slot="custom-description"</code>
  element
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Custom description">
  <div slot="custom-description">
    This
    <code>description</code>
    has rich formatting
  </div>
  More complex formatting is available within a
  <code>slot="custom-description"</code>
  element
</certara-disclosure>

Alignment

Default (baseline)

Caret aligns to summary baseline

Toggle dark mode

<certara-disclosure summary="Default" description="Baseline alignment" align-items="baseline">
  Caret aligns to summary baseline
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Default" description="Baseline alignment" alignItems="baseline">
  Caret aligns to summary baseline
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Default" description="Baseline alignment" align-items="baseline">
  Caret aligns to summary baseline
</certara-disclosure>

Center

Caret aligns to summary center

Toggle dark mode

<certara-disclosure summary="Center" description="Center alignment" align-items="center">
  Caret aligns to summary center
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Center" description="Center alignment" alignItems="center">
  Caret aligns to summary center
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Center" description="Center alignment" align-items="center">
  Caret aligns to summary center
</certara-disclosure>

Start

Caret aligns to summary start

Toggle dark mode

<certara-disclosure summary="Start" description="Start (top) alignment" align-items="start">
  Caret aligns to summary start
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Start" description="Start (top) alignment" alignItems="start">
  Caret aligns to summary start
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Start" description="Start (top) alignment" align-items="start">
  Caret aligns to summary start
</certara-disclosure>

End

Caret aligns to summary end

Toggle dark mode

<certara-disclosure summary="End" description="End (bottom) alignment" align-items="end">
  Caret aligns to summary end
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="End" description="End (bottom) alignment" alignItems="end">
  Caret aligns to summary end
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="End" description="End (bottom) alignment" align-items="end">
  Caret aligns to summary end
</certara-disclosure>

certara-disclosure

Properties

alignItems

Attribute	align-items
Type	"baseline" | "center" | "end" | "start"
Default	undefined
Required	false
Description	Control vertical alignment of disclosure triange

arrowEnd

Attribute	arrow-end
Type	boolean
Default	false
Required	false
Description	Disclosure arrow will show at the end of the content

description

Attribute	description
Type	string
Default	undefined
Required	false
Description	Description text that appears below label

hasHover

Attribute	has-hover
Type	boolean
Default	true
Required	false
Description	Controls the default hover effect

hasPadding

Attribute	has-padding
Type	boolean
Default	undefined
Required	false
Description	Content is padded to be flush with the opener DEPRECATED. Use layout instead. Will be removed in the next major version.

innerClassName

Attribute	inner-class-name
Type	string
Default	undefined
Required	false
Description	Additional class name(s) to apply to the inner content wrapper

layout

Attribute	layout
Type	"indented" | "none"
Default	undefined
Required	false
Description	Arrangement of the revealed content. indented pads the content to be flush with the opener. Defaults to none.

open

Attribute	open
Type	boolean
Default	false
Required	false
Description	Hidden content will be visible

summary

Attribute	summary
Type	string
Default	undefined
Required	false
Description	Visible label of the disclosure control

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	Content hidden by the disclosure goes in the main slot
custom-description	Slot available if description requires custom formatting
custom-summary	Slot available if summary requires custom formatting

Disclosures are expandable areas of content that are summarized or otherwise labeled to indicate what they relate to. There is a trigger that must be manually selected which allows the user to show and hide the additional content that is available.

Design guidelines

Default

Click the component to disclose its content.

The hidden content that is now shown.

Toggle dark mode

Complex example

Complex example (3) Badge

With a custom summmary you can create a more complex layout

Toggle dark mode

In practice

The Disclosure component simplifies the user experience by revealing interfaces upon request. It combines inline and block layout components to improve readability, allowing users to easily scan and comprehend the content for a better overall experience.

• Disclosures have two main parts:
  • The trigger that opens and closes the related content.
  • The container that displays the disclosed content.
• The disclosed content may include interactive elements.
• Disclosures are collapsed by default. However, the default state can be changed if needed.
• More than one disclosure item can be expanded at one time.

Accessibility

• Disclosure triggers are keyboard operable.
• The Disclosure is a native browser control and does not require additional JS.
• For more information, see our accessibility guidelines.

W3C guidelines for accessible disclosure UI

Design resources

View component in Figma