ui.voila.dev

Accordion

Stacked sections that expand one at a time.

From your workspace dashboard, create a project with the scope, timeline and required role. Matching freelancers are notified as soon as it is published.

<Accordion.Root defaultValue={["publishing"]}>
	<Accordion.Item value="publishing">
		<Accordion.Trigger>How do I publish a project?</Accordion.Trigger>
		<Accordion.Content>
			<p>From your client dashboard, create a project with…</p>
		</Accordion.Content>
	</Accordion.Item>
</Accordion.Root>

value is an array even for a single open panel. Pass multiple to let several stay open at once.

API

Accordion.Root

PropTypeDefault
classNamestring | ((state: State<any>) => string | undefined)—CSS class applied to the element, or a function that returns a class based on the component's state.
defaultValueAccordionValue<any>—The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the value prop instead.
disabledboolean—Whether the component should ignore user interaction.
hiddenUntilFoundboolean—Allows the browser's built-in page search to find and expand the panel contents. Overrides the keepMounted prop and uses hidden="until-found" to hide the element without removing it from the DOM.
keepMountedboolean—Whether to keep the element in the DOM while the panel is closed. This prop is ignored when hiddenUntilFound is used.
loopFocusboolean—Deprecated following the APG guidance update to remove roving focus. This prop no longer affects keyboard focus behavior.
multiplebooleanfalseWhether multiple items can be open at the same time.
onValueChange((value: AccordionValue<any>, eventDetails: AccordionRootChangeEventDetails) => void)—Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument.
orientationOrientation—Deprecated following the APG guidance update to remove roving focus. This prop no longer affects keyboard focus behavior.
renderComponentRenderFn<HTMLProps, State<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
styleCSSProperties | ((state: State<any>) => CSSProperties | undefined)—Style applied to the element, or a function that returns a style object based on the component's state.
valueAccordionValue<any>—The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the defaultValue prop instead.

Plus the DOM props of the element it renders. Source: accordion/components/accordion-root.tsx.

Accordion.Content

PropTypeDefault
classNamestring | ((state: AccordionPanelState) => string | undefined)—CSS class applied to the element, or a function that returns a class based on the component's state.
hiddenUntilFoundboolean—Allows the browser's built-in page search to find and expand the panel contents. Overrides the keepMounted prop and uses hidden="until-found" to hide the element without removing it from the DOM.
keepMountedboolean—Whether to keep the element in the DOM while the panel is closed. This prop is ignored when hiddenUntilFound is used.
renderComponentRenderFn<HTMLProps, AccordionPanelState> | ReactElement<unknown, string | JSXElementConstructor<any>>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
styleCSSProperties | ((state: AccordionPanelState) => CSSProperties | undefined)—Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: accordion/components/accordion-content.tsx.

Accordion.Item

PropTypeDefault
classNamestring | ((state: AccordionItemState) => string | undefined)—CSS class applied to the element, or a function that returns a class based on the component's state.
disabledboolean—Whether the component should ignore user interaction.
onOpenChange((open: boolean, eventDetails: AccordionItemChangeEventDetails) => void)—Event handler called when the panel is opened or closed.
renderComponentRenderFn<HTMLProps, AccordionItemState> | ReactElement<unknown, string | JSXElementConstructor<any>>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
styleCSSProperties | ((state: AccordionItemState) => CSSProperties | undefined)—Style applied to the element, or a function that returns a style object based on the component's state.
valueany—A unique value that identifies this accordion item. If no value is provided, a unique ID will be generated automatically. Use when controlling the accordion programmatically, or to set an initial open state.

Plus the DOM props of the element it renders. Source: accordion/components/accordion-item.tsx.

Accordion.Trigger

PropTypeDefault
classNamestring | ((state: AccordionTriggerState) => string | undefined)—CSS class applied to the element, or a function that returns a class based on the component's state.
nativeButtonboolean—Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
renderComponentRenderFn<HTMLProps, AccordionTriggerState> | ReactElement<unknown, string | JSXElementConstructor<any>>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
styleCSSProperties | ((state: AccordionTriggerState) => CSSProperties | undefined)—Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: accordion/components/accordion-trigger.tsx.

Edit this page on GitHub