Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Controlled multiple expansion
  • Workspace preferences
  • Controlled multiple
  • Disabled item
  • Long wrapping content
  • Icons and descriptions
  • Recommendations
  • Usage boundaries
  • API reference

Layout

Accordion

Reveals related content with clear heading hierarchy and optional separating panels.

idle

Usage

import {
	Accordion,
	AccordionItem,
	AccordionPanel,
	AccordionTrigger,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Accordion>
	<AccordionItem>
		<AccordionTrigger />
		<AccordionPanel />
	</AccordionItem>
</Accordion>

Examples

Controlled multiple expansion

Keep value and onValueChange together. The application can expand every section.

Workspace preferences

Review how your workspace is organized and where updates are delivered.

Controlled multiple

Coordinates multiple expanded panels through external state and actions.

Disabled item

Suppresses user interaction on restricted or unavailable sections.

Long wrapping content

Preserves layout structure and text wrapping across responsive viewports.

Icons and descriptions

Use consumer-provided icons and quieter descriptions to distinguish related sections.

Recommendations

GuidancePractice
Do

Use short section titles that explain the hidden content. Choose multiple expansion when users compare sections.

Usage boundaries

GuidanceBoundary
Scope

Keep required instructions visible. Use Tabs when each section represents a separate view.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
valueValue[]—Controlled value of expanded items. Expects an array of item values.
defaultValueValue[]—Initial expanded item values for uncontrolled accordion.
onValueChange(value: Value[], eventDetails: AccordionPrimitive.Root.ChangeEventDetails) => void—Callback invoked when expanded accordion items change.
multiplebooleanfalseAllows multiple accordion items to be expanded simultaneously.
disabledbooleanfalsePrevents user interaction across all items in the accordion.
childrenReactNode—Accordion items and content composed within the accordion.
AccordionAccordionProps"div"Root accordion container managing expanded item state with a default div host.
AccordionItemAccordionItemProps"div"Item container coordinating a single disclosure section with a value key.
AccordionTriggerAccordionTriggerProps"button"Interactive header trigger button with animated chevron and managed aria-expanded.
AccordionPanelAccordionPanelProps"div"Animated panel container for accordion item content.
AccordionPrimitivetypeof BaseAccordion—Low-level Base UI primitive escape hatch for custom composition.
variant"default" | "separated""default"Compact divided rows or grouped surfaces whose expanded items separate with animated spacing.
AccordionTrigger.iconReactNode—Consumer-provided decorative icon; Mizen owns the aligned icon surface.
AccordionTrigger.descriptionReactNode—Quieter helper text linked to the trigger through aria-describedby.
NextAspect Ratio

Choose which updates reach your inbox, and bundle the rest into a daily digest.

Manage workspace identity, display language, and active timezone.

Ingress proxies, firewall rules, and virtual private network peers.

System CPU, memory utilization, and throughput counters.

All session operations, authentication handshakes, and access token grants undergo cryptographic signing and replicated indexing across multiple availability zones. Retained audit records stay immutably stored for ninety days to comply with enterprise compliance frameworks.