Accordion

Functionality based on the Accordion radix component.

Implements experimental ColorScheme component to allow multiple colour setups.

The Accordion exports 4 components that combine to make the Accordion. The parent Accordion contains Accordion.Item components, which themselves must contain Accordion.Trigger and Accordion.Content.

The Accordion.Trigger has been simplified to include a chevron icon. Generally, you would only want to render text inside the rest.

Default styling has been applied to Accordion.Trigger, but Accordion.Content is an empty container without styling. Should only text be placed inside, it is highly advisable to apply spacing to align with the styling of the rest of the Accordion. This can be done with either the css property, or by placing any other components inside the Accordion.Content.

<Accordion type="single" defaultValue="1">
  <Accordion.Item value="1">
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content css={{ p: '$3' }}>
      <Text>Accordion content 1</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content css={{ p: '$3' }}>
      <Text>Accordion content 2</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Values

Each Accordion.Item must have a value, which can either be used as a defaultValue on the Accordion, or by setting the value of the Accordion so it is a controlled component. If value is set, it must also contain an onValueChange function that sets the value to a new value.

Collapsible

Accordions can be given the property collapsible, which allows all items to be collapsed. Without passing this at least one item must be open.

Type

Accordions can have type as either single or multiple. This changes how many items can be expanded at once. The default is single.

Note: if multiple, value and defaultValue must be in an array. Even if you want just one item to be visible initially, you must pass something like defaultValue={['name']}

Disabled

An Accordion.Item component can take a disabled prop, which would make it untoggleable. The corresponding Accordion.Content component's content will be, in this case, permanently in its original state.

<Accordion type="single" defaultValue="1">
  <Accordion.Item value="1" disabled>
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content css={{ p: '$3' }}>
      <Text>Accordion content 1</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content css={{ p: '$3' }}>
      <Text>Accordion content 2</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
<Accordion type="single" defaultValue="1">
  <Accordion.Item value="1" disabled>
    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
    <Accordion.Content css={{ p: '$3' }}>
      <Text>Accordion content 1</Text>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
    <Accordion.Content css={{ p: '$3' }}>
      <Text>Accordion content 2</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
Edit me!

Color Scheme

You can pass in a colorScheme object to the Accordion.Trigger to customise the colours of the component. Defaults to { accent: "slate", interactive: "loContrast1"} ColorScheme is experimental and has been implemented only locally but you can read more about how it currently works and available options on the repository's github.

<Accordion type="single" defaultValue="1">
  <Accordion.Item value="1">
    <Accordion.Trigger
      colorScheme={{
        accent: 'blue',
        interactive: 'hiContrast2'
      }}
    >
      Accordion Header 1
    </Accordion.Trigger>
    <Accordion.Content css={{ p: '$3' }}>
      <Text>Accordion content 1</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
<Accordion type="single" defaultValue="1">
  <Accordion.Item value="1">
    <Accordion.Trigger
      colorScheme={{
        accent: 'blue',
        interactive: 'hiContrast2'
      }}
    >
      Accordion Header 1
    </Accordion.Trigger>
    <Accordion.Content css={{ p: '$3' }}>
      <Text>Accordion content 1</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
Edit me!