Server Component · 0 KB client JS

Collapsible

A single disclosure that ships zero JavaScript. The open state is the browser's (<details>), toggling is the browser's, and the expanded / collapsed state is announced natively to assistive technology. It renders as a Server Component and works with JavaScript disabled.

What ships to the browser?

Nothing. This entire component renders to HTML on the server — the toggle you just used is the native details element.

Does it work with JavaScript disabled?

Yes — open, close, keyboard, and screen-reader state announcements are all platform behavior.

import { Collapsible, Box } from "astralis-ui";

// No "use client" — this demo IS a Server Component. The open/close behavior
// you're using is the browser's <details> element, not JavaScript.
export function CollapsibleDemo() {
  return (
    <Box w="full" maxW="md">
      <Collapsible defaultOpen>
        <Collapsible.Trigger>What ships to the browser?</Collapsible.Trigger>
        <Collapsible.Content>
          Nothing. This entire component renders to HTML on the server — the
          toggle you just used is the native details element.
        </Collapsible.Content>
      </Collapsible>
      <Collapsible>
        <Collapsible.Trigger>Does it work with JavaScript disabled?</Collapsible.Trigger>
        <Collapsible.Content>
          Yes — open, close, keyboard, and screen-reader state announcements
          are all platform behavior.
        </Collapsible.Content>
      </Collapsible>
    </Box>
  );
}

What ships to the browser?

Nothing but HTML: the toggle is the native details element.

defaultOpen

import { Collapsible } from "astralis-ui";

<Collapsible>
  <Collapsible.Trigger>What ships to the browser?</Collapsible.Trigger>
  <Collapsible.Content>Nothing but HTML: the toggle is the native details element.</Collapsible.Content>
</Collapsible>

Import#

import { Collapsible } from "astralis-ui";

Exclusive groups (accordion, no JS)#

Collapsibles sharing a name form a native exclusive accordion — opening one closes its siblings via the <details name> attribute:

Only one of us stays open

Open my sibling and I close.

Try me

The grouping is the name attribute.

Or me

Still no JavaScript.

import { Collapsible, Box } from "astralis-ui";

// Collapsibles sharing a `name` form a native exclusive accordion: opening
// one closes its siblings, with zero JavaScript (`<details name>`).
export function CollapsibleExclusive() {
  return (
    <Box w="full" maxW="md">
      <Collapsible name="faq" defaultOpen>
        <Collapsible.Trigger>Only one of us stays open</Collapsible.Trigger>
        <Collapsible.Content>Open my sibling and I close.</Collapsible.Content>
      </Collapsible>
      <Collapsible name="faq">
        <Collapsible.Trigger>Try me</Collapsible.Trigger>
        <Collapsible.Content>The grouping is the name attribute.</Collapsible.Content>
      </Collapsible>
      <Collapsible name="faq">
        <Collapsible.Trigger>Or me</Collapsible.Trigger>
        <Collapsible.Content>Still no JavaScript.</Collapsible.Content>
      </Collapsible>
    </Box>
  );
}

Uncontrolled by design#

There is no open/onOpenChange pair: a controlled variant would move the state into React and forfeit exactly the property this component exists for. Use defaultOpen for the initial state; if you need programmatic control, Accordion is the stateful sibling.

Accessibility#

The trigger stays a real <summary> with its native list-item display — only the marker is hidden. Restyling summary's display is the documented way to lose expanded/collapsed announcements in some screen readers, so the layout row is an inner span instead.
Find-in-page can auto-open a collapsed section in Chromium — content is searchable, not trapped.

Props#

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Open on first render. There is no controlled open prop: the state belongs to the browser.
`name`	`string`	—	Collapsibles sharing a name form a native exclusive group, where opening one closes the others.

Collapsible.Trigger#

Prop	Type	Default	Description
`hideIndicator`	`boolean`	`false`	Hides the built-in chevron, for when you draw your own.

Parts#

Prop	Type	Default	Description
`Collapsible.Trigger`	`summary props`	—	The always-visible summary line that toggles the content.
`Collapsible.Content`	`div props`	—	The content shown while open. Adds spacing and typography only.

Keyboard#

The trigger is a native <summary>, so it is a tab stop that toggles with Enter or Space, with or without JavaScript.