Expander ✦Documentation has not yet been reviewed by a human.

<Expander title="Primary" priority="primary" tone="brand"><Text>A pronounced section surface.</Text></Expander>
<Expander title="Secondary"><Text>A subtle section surface.</Text></Expander>
<Expander title="Tertiary" priority="tertiary"><Text>A disclosure in a content column.</Text></Expander>

<Expander title="Section title" level={2}><Text>A larger title scale.</Text></Expander>
<Expander title="Supporting details" level={6}><Text>A compact title scale.</Text></Expander>

import { Button, Expander, Icon, Text, Title } from '@antadesign/anta'
import { useState } from 'react'

function ExpanderActionsDemo() {
  const [downloads, setDownloads] = useState(0)
  return (
    <Expander
      title={<Title level={4}>Build artifacts</Title>}
      indicatorPlacement="end"
      indicator={{ closed: <Icon shape="plus" />, open: <Icon shape="minus" /> }}
      actions={<Button size="small" label="Download" onClick={() => setDownloads(count => count + 1)} />}
    >
      <Text>Download requests: {downloads}. The action leaves the disclosure state unchanged.</Text>
    </Expander>
  )
}

<Expander title="Rounded section" round><Text>The corners keep their radius when expanded.</Text></Expander>
<Expander title="Aligned section" priority="tertiary" outdent defaultOpen><Text>The title and body align with the surrounding content.</Text></Expander>

<Expander title="Disabled, closed" disabled><Text>Collapsed content.</Text></Expander>
<Expander title="Disabled, open" disabled defaultOpen><Text>Content remains visible.</Text></Expander>

import { Box, Checkbox, Expander, Text } from '@antadesign/anta'
import { useState } from 'react'

function CancelableExample() {
  const [keepOpen, setKeepOpen] = useState(true)
  return (
    <Box display="grid" gap={12} style={{ width: '100%' }}>
      <Checkbox checked={keepOpen} onStateChange={(_, { next }) => setKeepOpen(next === true)}>Keep details open</Checkbox>
      <Expander title="Unsaved changes" defaultOpen onStateChange={(event, { next }) => {
        if (!next && keepOpen) event.preventDefault()
      }}>
        <Text>Clear the checkbox to allow this section to close.</Text>
      </Expander>
    </Box>
  )
}

import { Box, Button, Checkbox, Expander, Text } from '@antadesign/anta'
import { useState } from 'react'

function ControlledExample() {
  const [open, setOpen] = useState(false)
  const [accept, setAccept] = useState(true)
  const [requests, setRequests] = useState(0)
  return (
    <Box display="grid" gap={12} style={{ width: '100%' }}>
      <Checkbox checked={accept} onStateChange={(_, { next }) => setAccept(next === true)}>Accept state requests</Checkbox>
      <Expander title="Release details" open={open} onStateChange={(_, { next }) => {
        setRequests(count => count + 1)
        if (accept) setOpen(next)
      }}>
        <Text>The content stays mounted when closed.</Text>
      </Expander>
      <Text>State requests: {requests}</Text>
      <Button label="Show details" onClick={() => setOpen(true)} />
    </Box>
  )
}

import { Box, Expander, Text } from '@antadesign/anta'
import { useState } from 'react'

const items = [
  { id: 'shipping', title: 'Shipping', body: 'Orders ship within two business days.' },
  { id: 'returns', title: 'Returns', body: 'Returns are accepted within 30 days.' },
]

function Accordion() {
  const [openId, setOpenId] = useState('shipping')
  return (
    <Box display="grid" gap={1}>
      {items.map(item => (
        <Expander key={item.id} title={item.title} open={openId === item.id}
          onStateChange={(_, { next }) => setOpenId(next ? item.id : null)}>
          <Text>{item.body}</Text>
        </Expander>
      ))}
    </Box>
  )
}