Collapsible
An interactive component which expands/collapses a panel.
Order #4189
StatusShipped
Installation
Usage
<Collapsible>
<Collapsible.Trigger render={<Button variant=Ghost size=Icon />}>
<Icons.ChevronsUpDown />
</Collapsible.Trigger>
<Collapsible.Content>
{"Content here."->React.string}
</Collapsible.Content>
</Collapsible>Controlled State
Use the open and onOpenChange props to control the state.
@react.component
let make = () => {
let (open_, setOpen) = React.useState(() => false)
<Collapsible open_= onOpenChange={o => setOpen(_ => o)}>
<CollapsibleTrigger> {"Toggle"->React.string} </CollapsibleTrigger>
<CollapsibleContent> {"Content"->React.string} </CollapsibleContent>
</Collapsible>
}Examples
Basic
Settings Panel
Use a trigger button to reveal additional settings.
Radius
Set the corner radius of the element.
File Tree
Use nested collapsibles to build a file tree.
API Reference
See the Base UI documentation for more information.