Accordion

Reveal related sections one at a time.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { Accordion } from '@vrum/ui';
import { AccordionItem, AccordionTrigger, AccordionContent } from '@vrum/ui';

<Accordion
  type={"single"}
  collapsible={true}
  variant={"boxed"}
>
  <AccordionItem value="one"><AccordionTrigger>Getting started</AccordionTrigger><AccordionContent>Install @vrum/ui and import the shared styles.</AccordionContent></AccordionItem>
  <AccordionItem value="two"><AccordionTrigger>Design tokens</AccordionTrigger><AccordionContent>Use semantic tokens for surfaces, text, and status.</AccordionContent></AccordionItem>
</Accordion>

Accordion props

Prop	Type	Default	Description
`type*`	`"multiple" \| "single"`	none	Interaction or visualization type.
`value`	`string \| string[]`	none	The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded.
`defaultValue`	`string \| string[]`	none	The value of the item whose content is expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion.
`onValueChange`	`((value: string) => void) \| ((value: string[]) => void)`	none	The callback that fires when the state of the accordion changes.
`disabled`	`boolean`	none	Whether or not an accordion is disabled from user interaction.
`orientation`	`Orientation`	none	The layout in which the Accordion operates.
`dir`	`Direction`	none	The language read direction.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`variant`	`"default" \| "boxed"`	`"default"`	Visual appearance within the Vrum design system.
`collapsible`	`boolean`	none	collapsible configuration.

AccordionItem props

Prop	Type	Default	Description
`disabled`	`boolean`	none	Whether or not an accordion item is disabled from user interaction.
`value*`	`string`	none	A string value for the accordion item. All items within an accordion should use a unique value.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

AccordionTrigger props

Prop	Type	Default	Description
`asChild`	`boolean`	none	as child configuration.
`disabled`	`boolean`	none	Disable user interaction.
`name`	`string`	none	name configuration.
`type`	`"submit" \| "reset" \| "button"`	none	type configuration.
`value`	`string \| number \| readonly string[]`	none	Controlled value.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLButtonElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLButtonElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLButtonElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLButtonElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLButtonElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLButtonElement>`	none	on select configuration.

AccordionContent props

Prop	Type	Default	Description
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`forceMount`	`true`	none	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Accordion

Reveal related sections one at a time.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { Accordion } from '@vrum/ui';
import { AccordionItem, AccordionTrigger, AccordionContent } from '@vrum/ui';

<Accordion
  type={"single"}
  collapsible={true}
  variant={"boxed"}
>
  <AccordionItem value="one"><AccordionTrigger>Getting started</AccordionTrigger><AccordionContent>Install @vrum/ui and import the shared styles.</AccordionContent></AccordionItem>
  <AccordionItem value="two"><AccordionTrigger>Design tokens</AccordionTrigger><AccordionContent>Use semantic tokens for surfaces, text, and status.</AccordionContent></AccordionItem>
</Accordion>

Accordion props

Prop	Type	Default	Description
`type*`	`"multiple" \| "single"`	none	Interaction or visualization type.
`value`	`string \| string[]`	none	The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded.
`defaultValue`	`string \| string[]`	none	The value of the item whose content is expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion.
`onValueChange`	`((value: string) => void) \| ((value: string[]) => void)`	none	The callback that fires when the state of the accordion changes.
`disabled`	`boolean`	none	Whether or not an accordion is disabled from user interaction.
`orientation`	`Orientation`	none	The layout in which the Accordion operates.
`dir`	`Direction`	none	The language read direction.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`variant`	`"default" \| "boxed"`	`"default"`	Visual appearance within the Vrum design system.
`collapsible`	`boolean`	none	collapsible configuration.

AccordionItem props

Prop	Type	Default	Description
`disabled`	`boolean`	none	Whether or not an accordion item is disabled from user interaction.
`value*`	`string`	none	A string value for the accordion item. All items within an accordion should use a unique value.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

AccordionTrigger props

Prop	Type	Default	Description
`asChild`	`boolean`	none	as child configuration.
`disabled`	`boolean`	none	Disable user interaction.
`name`	`string`	none	name configuration.
`type`	`"submit" \| "reset" \| "button"`	none	type configuration.
`value`	`string \| number \| readonly string[]`	none	Controlled value.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLButtonElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLButtonElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLButtonElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLButtonElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLButtonElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLButtonElement>`	none	on select configuration.

AccordionContent props

Prop	Type	Default	Description
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`forceMount`	`true`	none	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Accordion

Interactive playground

Props

Accordion props

AccordionItem props

AccordionTrigger props

AccordionContent props

Accordion

Interactive playground

Props

Accordion props

AccordionItem props

AccordionTrigger props

AccordionContent props