{open ? "Show fewer" : `Show ${rest.length} more files`}
);
}
```
### Advanced options
forceMount keeps the fields mounted while closed, so edits survive and still submit with the form.
```tsx
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Input } from "@/components/ui/input";
export default function CollapsibleAdvancedOptions() {
const [saved, setSaved] = React.useState("");
return (
);
}
```
## API reference
### Collapsible
Holds the open state. Renders a div and accepts its native attributes.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | — | Controlled open state. |
| `defaultOpen` | `boolean` | `false` | Initial state when uncontrolled. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the trigger asks to toggle. |
| `disabled` | `boolean` | `false` | Blocks toggling from the trigger. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
### CollapsibleTrigger
Renders a button with a chevron that turns and lights up while open. Also accepts every native button attribute.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Merges trigger behaviour and ARIA onto its single child element instead. No chevron is added. |
### CollapsibleContent
The part that opens and closes, with a height animation. Accepts native div attributes.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `forceMount` | `boolean` | `false` | Keep the content in the DOM while closed, hidden once the collapse finishes. |
## Accessibility
- The trigger is a button with aria-expanded, and aria-controls pointing at the content while it's open.
- Closed content is unmounted (or hidden with forceMount), so its links and fields leave the tab order.
- Overflow is clipped only during the animation, so focus rings and shadows inside aren't cut off once it's open.
- With reduced motion it opens and closes instantly, and the edge light is skipped.
## Source
`components/ui/collapsible.tsx`
```tsx
"use client";
import * as React from "react";
import { AnimatePresence, motion, useReducedMotion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";
/** The single element in `node`. Server Components can pass it as a lazy reference, which Children resolves. */
function resolveElement
(child) ? child : null;
}
type RenderProp = { asChild?: boolean; render?: React.ReactElement; nativeButton?: boolean; children?: React.ReactNode };
/**
* Base UI spells asChild as `render={}` plus `nativeButton`, and the shadcn CLI rewrites
* asChild into that form in base-* projects. Folds it back into asChild and children.
*/
function fromRenderProp
({ render, nativeButton, ...props }: P): Omit {
void nativeButton; // Only meaningful to Base UI.
if (!render) return props;
const children = props.children === undefined ? render : React.cloneElement(render, undefined, props.children);
return { ...props, asChild: true, children };
}
const EASE = [0.23, 1, 0.32, 1] as const;
// Overflow is clipped only while the height moves, so focus rings inside aren't cut off at rest.
const variants: Variants = {
open: { height: "auto", opacity: 1, transitionEnd: { overflow: "visible" } },
closed: { height: 0, opacity: 0, overflow: "hidden" },
};
type PossibleRef = React.Ref | undefined;
function setRef(ref: PossibleRef, value: T | null) {
if (typeof ref === "function") ref(value);
else if (ref) (ref as React.MutableRefObject).current = value;
}
function useComposedRefs(a: PossibleRef, b: PossibleRef) {
return React.useCallback(
(node: T | null) => {
setRef(a, node);
setRef(b, node);
},
[a, b],
);
}
// React 19 reads `ref` from props; React 18 keeps it on the element.
function getElementRef(element: React.ReactElement) {
if (Number.parseInt(React.version, 10) >= 19) {
return (element.props as { ref?: React.Ref }).ref;
}
return (element as unknown as { ref?: React.Ref }).ref;
}
type AnyProps = Record;
/** Merges props and refs onto its single child element. The child's handlers run first. */
const Slot = React.forwardRef(
({ children, ...props }, forwardedRef) => {
const child = resolveElement(children as React.ReactNode);
const ref = useComposedRefs(forwardedRef, child ? getElementRef(child) : undefined);
if (!child) return null;
const merged: AnyProps = { ...props };
for (const key of Object.keys(child.props)) {
const ours = props[key];
const theirs = child.props[key];
if (/^on[A-Z]/.test(key) && typeof ours === "function" && typeof theirs === "function") {
merged[key] = (event: { defaultPrevented?: boolean }) => {
(theirs as (event: unknown) => void)(event);
if (!event?.defaultPrevented) (ours as (event: unknown) => void)(event);
};
} else if (key === "className") {
merged.className = cn(theirs as string, ours as string);
} else if (key === "style") {
merged.style = { ...(theirs as object), ...(ours as object) };
} else if (ours === undefined) {
merged[key] = theirs;
}
}
return React.cloneElement(child, { ...merged, ref } as AnyProps);
},
);
Slot.displayName = "CollapsibleSlot";
interface CollapsibleContextValue {
open: boolean;
setOpen: (open: boolean) => void;
disabled: boolean;
contentId: string;
reduceMotion: boolean;
/** Counts closed-to-open changes so the edge light replays, but not for content that starts open. */
openings: number;
}
const CollapsibleContext = React.createContext(null);
function useCollapsible(component: string) {
const context = React.useContext(CollapsibleContext);
if (!context) throw new Error(`<${component}> must be rendered inside .`);
return context;
}
export interface CollapsibleProps extends Omit, "color"> {
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
/** Blocks toggling from the trigger. */
disabled?: boolean;
/** Palette name or hex. Inherits `--neon-accent` when omitted. */
color?: NeonColor;
}
const Collapsible = React.forwardRef(
(
{ open: openProp, defaultOpen = false, onOpenChange, disabled = false, color, className, style, ...props },
ref,
) => {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
const isControlled = openProp !== undefined;
const open = isControlled ? openProp : uncontrolledOpen;
const id = React.useId();
const reduceMotion = useReducedMotion() ?? false;
const [openings, setOpenings] = React.useState(0);
const [previous, setPrevious] = React.useState(open);
if (previous !== open) {
setPrevious(open);
if (open) setOpenings((count) => count + 1);
}
const setOpen = React.useCallback(
(next: boolean) => {
if (next === open) return;
if (!isControlled) setUncontrolledOpen(next);
onOpenChange?.(next);
},
[open, isControlled, onOpenChange],
);
const value = React.useMemo(
() => ({ open, setOpen, disabled, contentId: `${id}-content`, reduceMotion, openings }),
[open, setOpen, disabled, id, reduceMotion, openings],
);
return (
);
},
);
Collapsible.displayName = "Collapsible";
export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes {
/** Merge trigger behaviour onto the single child element instead of rendering a button. */
asChild?: boolean;
/** Base UI-style asChild: `render={}`. */
render?: React.ReactElement;
/** Accepted for Base UI compatibility; no effect. */
nativeButton?: boolean;
}
const CollapsibleTrigger = React.forwardRef(
(raw, ref) => {
const { asChild = false, className, onClick, children, ...props } = fromRenderProp(raw);
const { open, setOpen, disabled, contentId } = useCollapsible("CollapsibleTrigger");
const triggerProps = {
...props,
"aria-expanded": open,
"aria-controls": open ? contentId : undefined,
"aria-disabled": disabled || undefined,
"data-state": open ? "open" : "closed",
"data-disabled": disabled ? "" : undefined,
onClick: (event: React.MouseEvent) => {
onClick?.(event);
if (!event.defaultPrevented && !disabled) setOpen(!open);
},
};
if (asChild) {
return (
{children}
);
}
return (
);
},
);
CollapsibleTrigger.displayName = "CollapsibleTrigger";
export interface CollapsibleContentProps extends React.HTMLAttributes {
/** Keep the content in the DOM while closed (hidden), e.g. to preserve form state. */
forceMount?: boolean;
}
const CollapsibleContent = React.forwardRef(
({ forceMount = false, className, children, ...props }, ref) => {
const { open, contentId, reduceMotion, openings } = useCollapsible("CollapsibleContent");
const transition = reduceMotion ? { duration: 0 } : { duration: 0.22, ease: EASE };
// With forceMount, `hidden` lands only after the collapse finishes so it stays visible.
const [settledClosed, setSettledClosed] = React.useState(!open);
if (open && settledClosed) setSettledClosed(false);
const content = (
{children}
);
// A line of light draws down the revealed edge as it opens, then cools off.
const edge = open && openings > 0 && !reduceMotion && (
);
if (forceMount) {
return (
{
if (!open) setSettledClosed(true);
}}
hidden={!open && settledClosed}
className="relative"
>
{content}
{edge}
);
}
return (
{open && (
{content}
{edge}
)}
);
},
);
CollapsibleContent.displayName = "CollapsibleContent";
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
```