Collapsible

Style

Semantic colors, visual variants, density, and max-width via modifier classes on the collapsible root.

Preview

    <.collapsible class="collapsible ui-size-md">
  <:trigger>Subtle (default)</:trigger>
  <:content>Content</:content>
</.collapsible>

Semantic

Use class="ui-{role}" to set the semantic palette of a collapsible.

Available options: accent, alert, brand, info, success

    <.collapsible class="collapsible ui-size-md">
  <:trigger>Default width</:trigger>
  <:content>Content</:content>
</.collapsible>
<.collapsible class="collapsible ui-size-md ui-accent">
  <:trigger>Accent trigger</:trigger>
  <:content>Content</:content>
</.collapsible>
<.collapsible class="collapsible ui-size-md ui-brand">
  <:trigger>Brand trigger</:trigger>
  <:content>Content</:content>
</.collapsible>

Variant

Variant modifiers control collapsible surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

    <.collapsible class="collapsible ui-size-md">
  <:trigger>Subtle (default)</:trigger>
  <:content>Content</:content>
</.collapsible>
<.collapsible class="collapsible ui-solid ui-size-md">
  <:trigger>Solid</:trigger>
  <:content>Content</:content>
</.collapsible>
<.collapsible class="collapsible ui-ghost ui-size-md">
  <:trigger>Ghost</:trigger>
  <:content>Content</:content>
</.collapsible>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example collapsible ui-accent ui-solid.

    <.collapsible class="collapsible ui-size-md">
        <:trigger>Base</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-solid ui-size-md">
        <:trigger>Base</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-ghost ui-size-md">
        <:trigger>Base</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-accent ui-size-md">
        <:trigger>Accent</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-accent ui-solid ui-size-md">
        <:trigger>Accent</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-accent ui-ghost ui-size-md">
        <:trigger>Accent</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-alert ui-size-md">
        <:trigger>Alert</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-alert ui-solid ui-size-md">
        <:trigger>Alert</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-alert ui-ghost ui-size-md">
        <:trigger>Alert</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-brand ui-size-md">
        <:trigger>Brand</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-brand ui-solid ui-size-md">
        <:trigger>Brand</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-brand ui-ghost ui-size-md">
        <:trigger>Brand</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-info ui-size-md">
        <:trigger>Info</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-info ui-solid ui-size-md">
        <:trigger>Info</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-info ui-ghost ui-size-md">
        <:trigger>Info</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-success ui-size-md">
        <:trigger>Success</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-success ui-solid ui-size-md">
        <:trigger>Success</:trigger>
        <:content>Content</:content>
      </.collapsible>
<.collapsible class="collapsible ui-success ui-ghost ui-size-md">
        <:trigger>Success</:trigger>
        <:content>Content</:content>
      </.collapsible>

Size

Use class="ui-size-{size}" to set the size of a collapsible.

Available options: xs, sm, md (default), lg, xl

    <.collapsible class="collapsible ui-size-sm">
  <:trigger>Small</:trigger>
  <:content><p>Content</p></:content>
</.collapsible>
<.collapsible class="collapsible ui-size-md">
  <:trigger>Medium</:trigger>
  <:content><p>Content</p></:content>
</.collapsible>
<.collapsible class="collapsible ui-size-lg">
  <:trigger>Large</:trigger>
  <:content><p>Content</p></:content>
</.collapsible>
<.collapsible class="collapsible ui-size-xl">
  <:trigger>Extra large</:trigger>
  <:content><p>Content</p></:content>
</.collapsible>

Max width

Without max-w-*, width comes from component CSS. Default for collapsible: md (width: 100%).

Use class="max-w-{step}" to set the maximum width of a collapsible root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (md)

none

full

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.collapsible id="collapsible-style-max-default" class="collapsible">
  <:trigger>default</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-none" class="collapsible max-w-none">
  <:trigger>none</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-full" class="collapsible max-w-full">
  <:trigger>full</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-9xs" class="collapsible max-w-9xs">
  <:trigger>9xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-8xs" class="collapsible max-w-8xs">
  <:trigger>8xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-7xs" class="collapsible max-w-7xs">
  <:trigger>7xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-6xs" class="collapsible max-w-6xs">
  <:trigger>6xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-5xs" class="collapsible max-w-5xs">
  <:trigger>5xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-4xs" class="collapsible max-w-4xs">
  <:trigger>4xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-3xs" class="collapsible max-w-3xs">
  <:trigger>3xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-2xs" class="collapsible max-w-2xs">
  <:trigger>2xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-xs" class="collapsible max-w-xs">
  <:trigger>xs</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-sm" class="collapsible max-w-sm">
  <:trigger>sm</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-md" class="collapsible max-w-md">
  <:trigger>md</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-lg" class="collapsible max-w-lg">
  <:trigger>lg</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-xl" class="collapsible max-w-xl">
  <:trigger>xl</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-2xl" class="collapsible max-w-2xl">
  <:trigger>2xl</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-3xl" class="collapsible max-w-3xl">
  <:trigger>3xl</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-4xl" class="collapsible max-w-4xl">
  <:trigger>4xl</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-5xl" class="collapsible max-w-5xl">
  <:trigger>5xl</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-6xl" class="collapsible max-w-6xl">
  <:trigger>6xl</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-7xl" class="collapsible max-w-7xl">
  <:trigger>7xl</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-8xl" class="collapsible max-w-8xl">
  <:trigger>8xl</:trigger>
  <:content>Content</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-9xl" class="collapsible max-w-9xl">
  <:trigger>9xl</:trigger>
  <:content>Content</:content>
</.collapsible>

Max height

Use class="max-h-{step}" to set the maximum height of a collapsible root.

Available options: none, full, screen, dvh, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (collapsible)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.collapsible id="collapsible-style-max-h-default" class="collapsible" open>
  <:trigger>default</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-9xs" class="collapsible ui-max-height-9xs" open>
  <:trigger>9xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-8xs" class="collapsible ui-max-height-8xs" open>
  <:trigger>8xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-7xs" class="collapsible ui-max-height-7xs" open>
  <:trigger>7xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-6xs" class="collapsible ui-max-height-6xs" open>
  <:trigger>6xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-5xs" class="collapsible ui-max-height-5xs" open>
  <:trigger>5xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-4xs" class="collapsible ui-max-height-4xs" open>
  <:trigger>4xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-3xs" class="collapsible ui-max-height-3xs" open>
  <:trigger>3xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-2xs" class="collapsible ui-max-height-2xs" open>
  <:trigger>2xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-xs" class="collapsible ui-max-height-xs" open>
  <:trigger>xs</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-sm" class="collapsible ui-max-height-sm" open>
  <:trigger>sm</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-md" class="collapsible ui-max-height-md" open>
  <:trigger>md</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-lg" class="collapsible ui-max-height-lg" open>
  <:trigger>lg</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-xl" class="collapsible ui-max-height-xl" open>
  <:trigger>xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-2xl" class="collapsible ui-max-height-2xl" open>
  <:trigger>2xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-3xl" class="collapsible ui-max-height-3xl" open>
  <:trigger>3xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-4xl" class="collapsible ui-max-height-4xl" open>
  <:trigger>4xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-5xl" class="collapsible ui-max-height-5xl" open>
  <:trigger>5xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-6xl" class="collapsible ui-max-height-6xl" open>
  <:trigger>6xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-7xl" class="collapsible ui-max-height-7xl" open>
  <:trigger>7xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-8xl" class="collapsible ui-max-height-8xl" open>
  <:trigger>8xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>

<.collapsible id="collapsible-style-max-h-9xl" class="collapsible ui-max-height-9xl" open>
  <:trigger>9xl</:trigger>
  <:content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus. Integer at metus sed nisl faucibus volutpat.</:content>
</.collapsible>