Accordion

A disclosure component that groups collapsible sections to let users reveal or hide related content.
For more information on this component configuration, visit Radix UI

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Disabled Item

Use the disabled attr or the disabled class to disable an item component.

Option 1

Option 2

Sizes

Use the accordion-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Option 1

The quick brown fox jumps over the lazy dog

Option 2

Customizing

globals.css


:root {
  --ex-accordion-trigger-cursor: default;
 
  --ex-accordion-font-size-sm: var(--text-xs);
  --ex-accordion-font-size-md: var(--text-sm);
  --ex-accordion-font-size-lg: var(--text-base);
 
  --ex-accordion-radius-sm: var(--radius-sm);
  --ex-accordion-radius-md: var(--radius-sm);
  --ex-accordion-radius-lg: var(--radius-sm);
 
  --ex-accordion-trigger-gap-x-sm: calc(var(--spacing) * 2);
  --ex-accordion-trigger-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-accordion-trigger-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-accordion-trigger-px-sm: calc(var(--spacing) * 4);
  --ex-accordion-trigger-px-md: calc(var(--spacing) * 5);
  --ex-accordion-trigger-px-lg: calc(var(--spacing) * 6);
 
  --ex-accordion-trigger-py-sm: calc(var(--spacing) * 4);
  --ex-accordion-trigger-py-md: calc(var(--spacing) * 5);
  --ex-accordion-trigger-py-lg: calc(var(--spacing) * 6);
 
  --ex-accordion-section-gap-x-sm: calc(var(--spacing) * 2);
  --ex-accordion-section-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-accordion-section-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-accordion-section-gap-y-sm: calc(var(--spacing) * 2);
  --ex-accordion-section-gap-y-md: calc(var(--spacing) * 2);
  --ex-accordion-section-gap-y-lg: calc(var(--spacing) * 2);
 
  --ex-accordion-section-px-sm: calc(var(--spacing) * 4);
  --ex-accordion-section-px-md: calc(var(--spacing) * 5);
  --ex-accordion-section-px-lg: calc(var(--spacing) * 6);
 
  --ex-accordion-section-py-sm: calc(var(--spacing) * 4);
  --ex-accordion-section-py-md: calc(var(--spacing) * 5);
  --ex-accordion-section-py-lg: calc(var(--spacing) * 6);
 
  --ex-accordion-icon-font-size-sm: var(--text-lg);
  --ex-accordion-icon-font-size-md: var(--text-xl);
  --ex-accordion-icon-font-size-lg: var(--text-2xl);
 
  --ex-accordion-title-font-size-sm: var(--text-sm);
  --ex-accordion-title-font-size-md: var(--text-base);
  --ex-accordion-title-font-size-lg: var(--text-lg);
 
  --ex-accordion-title-font-weight: var(--font-weight-semibold);
 
  --ex-accordion-description-font-size-sm: var(--text-xs);
  --ex-accordion-description-font-size-md: var(--text-sm);
  --ex-accordion-description-font-size-lg: var(--text-base);
 
  --ex-accordion-description-font-weight: var(--font-weight-normal);
  --ex-accordion-description-opacity: var(--ex-options-opacity-muted);
}

API

For more information on this component configuration, visit Radix UI

Accordion

Element	Selector
`Accordion`	`.ex-accordion`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`collapsible`	`boolean`	`false`
`defaultValue`	`string`
`disabled`	`boolean`	`false`
`type`	`enum of ["single", "multiple"]`	`single`
`value`	`string`
`onValueChange`	`function`

Accordion Header

Element	Selector
`Accordion.Header`	`.ex-accordion-header`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Accordion Trigger

Element	Selector
`Accordion.Trigger`	`.ex-accordion-trigger`

Prop	Type	Default
`as`	`ElementType`	`button`
`asChild`	`boolean`	`false`

Accordion Item

Element	Selector
`Accordion.Item`	`.ex-accordion-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`value`	`string`

Accordion Content

Element	Selector
`Accordion.Field`	`.ex-accordion-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`false`

Accordion Section

Element	Selector
`Accordion.Section`	`.ex-accordion-section`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Accordion Icon

Element	Selector
`Accordion.Icon`	`.ex-accordion-icon`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Accordion Title

Element	Selector
`Accordion.Title`	`.ex-accordion-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

Accordion Description

Element	Selector
`Accordion.Description`	`.ex-accordion-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`