Disclosure

A component that reveals or hides additional content when toggled.

Title

Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.

Usage

Use standalone, or inside Accordion.

Svelte

<Disclosure label="Section" {...props}>Content</Disclosure>

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte

<details class="whole" {...rest}>
  <summary class="label" aria-disabled aria-description>
    {label}
  </summary>
  <div class="main" transition:slide conditional>
    {children}
  </div>
</details>

Props

Name	Type	Default	Description
`label*`	`string	Snippet`	-
`children*`	`Snippet`	-	Panel content; receives variant
`open`	`boolean`	`false`	Bindable open/closed state
`duration`	`number`	`200`	Default slide duration; feeds the default slide params
`transition`	`DisclosureTransition`	-	Overrides the open/close animation, default slide
`inactive`	`string	boolean`	-
`attach`	`Attachment`	-	Svelte attachment on the details element
`element`	`HTMLDetailsElement`	-	Bindable details element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Bindable variant

* required. Other HTMLDetailsAttributes except name are passed to <details> via rest props; class is merged onto the root.

Styling

To learn more, see Styling.

Variant Management

When the details element is closed, neutral is applied; when it is open, active is applied. If the variant prop is specified, the specified value is applied instead of neutral.

Default Class Name

svs-disclosure

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Summary (label <summary>): aria-disabled="true" when inactive is set, and aria-description when inactive is a reason string.

The managed inactive attributes are component-owned while inactive handling is active; pointer activation is suppressed instead of using a non-native disabled state.

Standards Basis

Disclosure is built on native <details> and <summary> elements, so keyboard and assistive-technology support follows the browser standard for disclosures. See the Concepts standards-first guidance for the library's approach.

Exports

Types

TypeScript

interface DisclosureProps extends Omit<HTMLDetailsAttributes, "children" | "name"> {
  label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
  children: Snippet<[string]>; // Snippet<[variant]>
  open?: boolean; // bindable (false)
  duration?: number; // (200)
  transition?: DisclosureTransition;
  inactive?: string | boolean; // reason string (aria-description) OR true for reason-less soft-disable
  attach?: Attachment<HTMLDetailsElement>;
  element?: HTMLDetailsElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // bindable (VARIANT.NEUTRAL)
  // other HTMLDetailsAttributes except `name` are passed to <details> via ...rest; `class` is merged onto root
}
type DisclosureReqdProps = "label" | "children";
type DisclosureBindProps = "open" | "variant" | "element";
type DisclosureTransition = {
  fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => TransitionConfig;
  params?: unknown;
};

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Title

Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like

Title

Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.