Accordion

A accordion is a design element that expands in place to expose hidden information.

Accordion label

label

labelVariant

disabled



<HvAccordion label="Accordion label" labelVariant="label">
<div>
  My accordion example content
</div>
</HvAccordion>


<HvAccordion label="Accordion label" labelVariant="label">
<div>
  My accordion example content
</div>
</HvAccordion>

You can use the HvSection component to create an accordion group that better fits your needs. Please refer to the Section documentation for usage.

Controlled

You can control the state of HvAccordion by using the expanded / onChange props.

Accordion label

import { useState } from "react";


export default function Demo() {
  const [expanded, setExpanded] = useState(false);


  return (
    <div className="flex flex-col w-full">
      <HvButton className="w-150px" onClick={() => setExpanded((p) => !p)}>
        Open
      </HvButton>
      <HvAccordion
        expanded={expanded}
        onChange={(e, isExpanded) => setExpanded(isExpanded)}
        label="Accordion label"
        labelVariant="label"
      >
        <div>My accordion content</div>
      </HvAccordion>
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="flex flex-col w-full">
      <HvButton className="w-150px" onClick={() => setExpanded((p) => !p)}>
        Open
      </HvButton>
      <HvAccordion
        expanded={expanded}
        onChange={(e, isExpanded) => setExpanded(isExpanded)}
        label="Accordion label"
        labelVariant="label"
      >
        <div>My accordion content</div>
      </HvAccordion>
    </div>
  );
}

Multiple accordions

If you need an accordion group, you can use multiple HvAccordion components.

UI Kit

Components

Widgets

Templates

<div className="w-full flex flex-col w-1/2">
  <HvTypography className="pb-1" variant="title3">
    UI Kit
  </HvTypography>


  <HvAccordion label="Components" labelVariant="title4">
    <HvPanel>
      UI Building blocks that can be used in various combinations to create a
      larger user interface
    </HvPanel>
  </HvAccordion>
  <HvAccordion label="Widgets" labelVariant="title4">
    <HvPanel>
      Specialized components that address specific use cases and can be used as
      base to support other scenarios.
    </HvPanel>
  </HvAccordion>
  <HvAccordion label="Templates" labelVariant="title4">
    <HvPanel>
      Pre-designed layouts that address common UI patterns and can be used to
      quickly create a consistent design.
    </HvPanel>
  </HvAccordion>
</div>

<div className="w-full flex flex-col w-1/2">
  <HvTypography className="pb-1" variant="title3">
    UI Kit
  </HvTypography>

  <HvAccordion label="Components" labelVariant="title4">
    <HvPanel>
      UI Building blocks that can be used in various combinations to create a
      larger user interface
    </HvPanel>
  </HvAccordion>
  <HvAccordion label="Widgets" labelVariant="title4">
    <HvPanel>
      Specialized components that address specific use cases and can be used as
      base to support other scenarios.
    </HvPanel>
  </HvAccordion>
  <HvAccordion label="Templates" labelVariant="title4">
    <HvPanel>
      Pre-designed layouts that address common UI patterns and can be used to
      quickly create a consistent design.
    </HvPanel>
  </HvAccordion>
</div>

HvSection

Avatar

Accordion

Controlled

Multiple accordions

UI Kit

Related components