alpha

Accordion

A group of disclosures that can be expanded and collapsed.

installyarn add @react-spectrum/accordion
version3.0.0-alpha.34
usageimport {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/accordion'

Example#


<Accordion defaultExpandedKeys={['personal']}>
  <Disclosure id="personal">
    <DisclosureHeader>Personal Information</DisclosureHeader>
    <DisclosurePanel>
      <p>Personal information form here.</p>
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      <p>Billing address form here.</p>
    </DisclosurePanel>
  </Disclosure>
</Accordion>
<Accordion defaultExpandedKeys={['personal']}>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal Information
    </DisclosureHeader>
    <DisclosurePanel>
      <p>Personal information form here.</p>
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>
      <p>Billing address form here.</p>
    </DisclosurePanel>
  </Disclosure>
</Accordion>
<Accordion
  defaultExpandedKeys={[
    'personal'
  ]}
>
  <Disclosure id="personal">
    <DisclosureHeader>
      Personal
      Information
    </DisclosureHeader>
    <DisclosurePanel>
      <p>
        Personal
        information
        form here.
      </p>
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="billing">
    <DisclosureHeader>
      Billing Address
    </DisclosureHeader>
    <DisclosurePanel>
      <p>
        Billing address
        form here.
      </p>
    </DisclosurePanel>
  </Disclosure>
</Accordion>

Props#


NameTypeDescription
childrenReact.ReactNodeThe disclosures within the accordion group.
allowsMultipleExpandedbooleanWhether multiple items can be expanded at the same time.
isDisabledbooleanWhether all items are disabled.
expandedKeysIterable<Key>The currently expanded keys in the collection (controlled).
defaultExpandedKeysIterable<Key>The initial expanded keys in the collection (uncontrolled).
Events
NameTypeDescription
onExpandedChange( (keys: Set<Key> )) => anyHandler that is called when items are expanded or collapsed.
Layout
NameTypeDescription
flexResponsive<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrowResponsive<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinkResponsive<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisResponsive<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelfResponsive<'auto''normal''start''end''center''flex-start''flex-end''self-start''self-end''stretch'>Overrides the alignItems property of a flex or grid container. See MDN.
justifySelfResponsive<'auto''normal''start''end''flex-start''flex-end''self-start''self-end''center''left''right''stretch'>Specifies how the element is justified inside a flex or grid container. See MDN.
orderResponsive<number>The layout order for the element within a flex or grid container. See MDN.
gridAreaResponsive<string>When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnResponsive<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowResponsive<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartResponsive<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndResponsive<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartResponsive<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndResponsive<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDescription
marginResponsive<DimensionValue>The margin for all four sides of the element. See MDN.
marginTopResponsive<DimensionValue>The margin for the top side of the element. See MDN.
marginBottomResponsive<DimensionValue>The margin for the bottom side of the element. See MDN.
marginStartResponsive<DimensionValue>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndResponsive<DimensionValue>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginXResponsive<DimensionValue>The margin for both the left and right sides of the element. See MDN.
marginYResponsive<DimensionValue>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
widthResponsive<DimensionValue>The width of the element. See MDN.
minWidthResponsive<DimensionValue>The minimum width of the element. See MDN.
maxWidthResponsive<DimensionValue>The maximum width of the element. See MDN.
heightResponsive<DimensionValue>The height of the element. See MDN.
minHeightResponsive<DimensionValue>The minimum height of the element. See MDN.
maxHeightResponsive<DimensionValue>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
positionResponsive<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
topResponsive<DimensionValue>The top position for the element. See MDN.
bottomResponsive<DimensionValue>The bottom position for the element. See MDN.
leftResponsive<DimensionValue>The left position for the element. See MDN. Consider using start instead for RTL support.
rightResponsive<DimensionValue>The right position for the element. See MDN. Consider using start instead for RTL support.
startResponsive<DimensionValue>The logical start position for the element, depending on layout direction. See MDN.
endResponsive<DimensionValue>The logical end position for the element, depending on layout direction. See MDN.
zIndexResponsive<number>The stacking order for the element. See MDN.
isHiddenResponsive<boolean>Hides the element.
Accessibility
NameTypeDescription
idstringThe element's unique identifier. See MDN.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets inline style for the element. Only use as a last resort. Use style props instead.