Expandable

Expandable is a layout component used for creating content that can be expanded and collapsed.

React

released

Vue

released

Elements

released

Android

unsupported

iOS

released

Examples

Example theme:

DBA lightFinn lightTori light

Usage

Design Guidelines

See Figma: Warp - Components / Expandable (Accordion)

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Import

You can import the component like so:

import { Expandable } from '@warp-ds/react';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { Expandable } from '@warp-ds/react/components/expandable'

Visual options

Default

<Expandable title="I am expandable">
  <p>Expandable contents go here.</p>
</Expandable>

Expandable box

<Expandable title="I am expandable box" box>
  <p>Expandable contents go here.</p>
</Expandable>

Expandable box with icon

import { IconBag16 } from '@fabric-ds/icons/react';

<Expandable
  title={
    <div className="flex flex-row items-center">
      <IconBag16 />
      <p className="ml-8 mb-0">This is a title with an icon</p>
    </div>
  }
  box
>
  <p>Expandable contents go here.</p>
</Expandable>;

Expandable animated box

<Expandable title="I am expandable animated box" box animated>
  <p>Expandable contents go here.</p>
</Expandable>

The expanded prop

You can set whether the component is open or collapsed using the expanded prop.

<Expandable title="I am initially..." expanded>
  <p>...expanded</p>
</Expandable>

onChange event

<Expandable title="I am expandable" onChange={(state) => console.log(state)}>
  <h1>onChange example</h1>
  <p>Expandable contents go here.</p>
</Expandable>

Controlling the component

If you need to take control of expansion, use the onChange event in combination with the expanded prop.

function Example() {
  const [open, setOpen] = React.useState(true);

  return (
    <Expandable title="Expandable box" box expanded={open} onChange={setOpen}>
      <p>I am expanded</p>
    </Expandable>
  );
}

Props

Required props

name	type	default	notes
title	string		The title for the expandable

Optional Props

name	type	default	notes
className	string		Additional classes to include
style	CSSProperties		CSS styles to inline on the component
expanded	boolean	false	The state of the component, either true for expanded or false for closed
bleed	boolean		Will make the expandable full-width on sm-size
box	boolean		Will make the expandable a Box
buttonClass	string		Additional CSS classes to include on the button part of the component
contentClass	string		Additional CSS classes to include on the content part of the component
animated	boolean		Will animate the expansion/collapse
chevron	boolean	true	Controls chevron visibility
headingLevel	HeadingLevel		Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element

Events

name	when
onChange	(state: boolean) => void		Event function to be called any time the component is expanded or closed. Function will be passed a boolean with a value of true if the component is now expanded or false if it is now closed.