Shadix

Collapsible

An interactive disclosure widget that shows or hides a region of content. 

<.collapsible></.collapsible>

Examples

Initially open

Pass open to render the content expanded by default.

@radix-ui/primitives
@radix-ui/colors 
<div class="w-full max-w-sm">
  <.collapsible id="open-collapsible" open>
    <:trigger>
      <span class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm font-semibold hover:bg-accent hover:text-accent-foreground">
        @peduarte starred 3 repositories
      </span>
    </:trigger>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @radix-ui/primitives
    </div>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @radix-ui/colors
    </div>
  </.collapsible>
</div>

Props

Name Type Default Values
class :string
id :string
open :boolean false
inner_block (slot) :slot
trigger (slot) :slot