Expander

Control that displays a header and a collapsible content area.

Expander Title A description of the expander

This is the content of the expander.

Expander - Direction: Up

This is the content of the expander.

Disabled Expander

Usage

A basic expander expects a header and its content. You can configure the header by passing the `header` property. Content can be provided as child elements of the component. By default, the content container has no padding, this allows you to use 100% of the content width if needed.

<script>
  import { Expander } from 'fluentui-svelte';
</script>

<Expander header="Expander Title">
  <p>This is the content of the expander</p>
</Expander>

Controlling Expansion

Expanders can be either expanded or collapsed. This can be controlled by setting the `expanded` property.

View Code

<Expander header="Expander Title" expanded>
  <p>This is the content of the expander</p>
</Expander>

Expander Title

This is the content of the expander

Opening Direction

An expander doesn’t have to expand downwards. You can control an expander’s expansion direction using the `direction` property. To create an upwards-expanding expander, set `direction` to `up`.

View Code

<Expander header="Expander Title" direction="up">
  <p>This is the content of the expander</p>
</Expander>

Expander Title

This is the content of the expander

Adding an Icon

You can easily add an icon to an expander’s header using the `Icon` prop. You can pass either a Snippet or a Component.

View Code

<script>
  import { Expander } from 'fluentui-svelte';
  import { InfoRegular } from 'fluentui-icons-svelte';
</script>

<Expander header="Expander With Icon" Icon={InfoRegular}>
  <p>This is the content of the expander</p>
</Expander>

Expander With Icon

This is the content of the expander

Component Props

Name	Type	Default	Description
`header`	`string`		Label of the expander.
`description`	`string`		Description to render below the header.
`direction`	`'down'` \| `'up'`	`'down'`	Set the opening direction of the expander.
`justify`	`boolean`	`false`	The expander is justified to the full width of the container.
`disabled`	`boolean`	`false`	Disables the user interaction.
`animation`	`{ duration: number; easing: string; }`		The animation configuration. Reduced motion is always honoured over this.
`expanded` bindable	`boolean`	`false`	Control the opening state of the expander.
`ref` bindable	`HTMLDetailsElement`		The DOM reference of the expander element.
`Icon`	`Snippet` \| `Component`		The icon to display before the label.
`summaryRef` bindable	`HTMLElement`		The DOM reference of the summary element.
`summaryProps`	`HTMLAttributes`		The props to spread on the summary element.
Element Attributes (`details`)