Accordion
A stacked set of interactive headings which reveal or hide their associated content.
Yes, if you wrap the Accordion.Header component around the trigger, screen readers will announce it properly.
Yup! You can even use animations or CSS transitions using the animated prop on the accordion root!
You can do that by setting the behavior prop to "multi" on the Accordion
import { component$ } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
import SVG from './svg';
export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<Accordion.Root class="w-full" animated enhance={true}>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>Can I add headings inside the accordion?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">
Yes, if you wrap the <strong>Accordion.Header</strong> component around
the trigger, screen readers will announce it properly.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>Is it easy to animate?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">
Yup! You can even use animations or CSS transitions using the{' '}
<strong>animated</strong> prop on the accordion root!
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>How about opening multiple items?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">
You can do that by setting the <strong>behavior</strong> prop to "multi"
on the Accordion
</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
});
Qwik UI's Accordion implementation follows the WAI-Aria design pattern, along with some additional API's that enhance the flexibility, types, and performance.
- Full keyboard navigation
- Single or Multi Accordion
- Controlled or uncontrolled
- Animatable, dynamic, and resumable
Building blocks
import { component$ } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
export default component$(() => {
return (
<Accordion.Root>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger>Title</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>Content</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
});
🎨 Anatomy
Component | Description |
Accordion.Root | The root container for the accordion. |
Accordion.Item | An item inside of the root. It contains the item's heading, trigger, and content. |
Accordion.Header | An HTML Heading Element. The default is set to h3, can be changed with the as prop. |
Accordion.Trigger | Toggles the corresponding content when clicked or activated. It should be placed within the Accordion.Header component. |
Accordion.Content | Contains the content associated with an item when clicking on its respective trigger. |
Multiple items
100%. The trigger has a [data-state] selector that can be styled when equal to the open or closed values.
For example, [data-state="open"]
It's typed using PropsOf, meaning you can treat it like an element!
You can use onClick$, onKeyDown$, any handlers you'd normally use with Qwik!
import { component$ } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
import SVG from './svg';
export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<Accordion.Root class="w-full" collapsible animated behavior="multi">
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>Can I style based on the trigger state?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">
100%. The trigger has a <strong>[data-state]</strong> selector that can be
styled when equal to the <strong>open</strong> or <strong>closed</strong>{' '}
values.
<br />
<br />
For example, [data-state="open"]
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>What about applying attributes?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">
It's typed using <strong>PropsOf</strong>, meaning you can treat it like
an element!
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>How about using event handlers?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">
You can use onClick$, onKeyDown$, any handlers you'd normally use with
Qwik!
</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
});
Animations
The previous two examples make use of the animated prop. This prop allows you to use the transition
and animation
properties without the content immediately closing. In the future, there will be native browser support for transitioning display.
If you're curious about how the accordion is animated, you can use a built-in Qwik UI variable called --qwikui-accordion-content-height.
The variable calculates the content height behind the scenes, so that you can use this variable in your keyframes. Out of the box, you can use the accordion-open
and accordion-close
keyframes in your project. These use an animation
declaration on the height property.
Non-collapsible
You can turn it off by setting the collapsible prop to false.
Yes, there's a dynamic section further below.
Of course! You can also use the onFocusIndexChange$ and onSelectedIndexChange$ custom events.
import { component$ } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
import SVG from './svg';
// non-collapsible
export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<Accordion.Root class="w-full" animated collapsible={false}>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>How do I turn off collapsing?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">
You can turn it off by setting the <strong>collapsible</strong> prop to
false.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>Can it be dynamic?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">Yes, there's a dynamic section further below.</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<h3>
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>Can I reactively change stuff?</span>
<span class="pl-2">
<SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
</span>
</Accordion.Trigger>
</h3>
<Accordion.Content class="accordion-animation-1 overflow-hidden">
<p class="pb-4">
Of course! You can also use the onFocusIndexChange$ and
onSelectedIndexChange$ custom events.
</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
});
By default, the collapsible prop is set to true. You can revert this behavior by setting it to false in the Accordion Root component.
Disabled
Hey, I'm enabled! This is because I don't use the disabled prop on the trigger.
Hey, I'm enabled! This is because I don't use the disabled prop on the trigger.
You shouldn't be able to see this!
import { component$ } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
// disabled
export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<Accordion.Root class="w-full">
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>I'm enabled!</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
Hey, I'm enabled! This is because I don't use the{' '}
<strong>disabled</strong> prop on the trigger.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>I'm enabled!</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
Hey, I'm enabled! This is because I don't use the{' '}
<strong>disabled</strong> prop on the trigger.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<h3>
<Accordion.Trigger
disabled
class="group flex w-full items-center justify-between py-4 text-left hover:bg-accent/50 aria-disabled:cursor-not-allowed aria-expanded:rounded-none"
>
<span>
I'm{' '}
<span class="font-bold" style="color: red">
disabled!
</span>
</span>
<span class="flex pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</h3>
<Accordion.Content>
<p class="pb-4">You shouldn't be able to see this!</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
});
When disabling an accordion trigger, you're adding the default disabled browser behavior, along with removing the element from the focus order.
Any disabled elements will be skipped over when using tab or the Up Arrow
and Down Arrow
keys. You can do this by adding the disabled prop on any trigger.
Default Value
I wasn't open by default!
You can open me by default by putting the defaultValue prop on the Accordion Item.
I wasn't open by default!
import { component$ } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<Accordion.Root class="w-full">
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>Not open by default.</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">I wasn't open by default!</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultValue>
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>I'm open!</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
You can open me by default by putting the <strong>defaultValue</strong>{' '}
prop on the Accordion Item.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<h3>
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>Not open by default.</span>
<span class="flex pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</h3>
<Accordion.Content>
<p class="pb-4">I wasn't open by default!</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
});
You can make the accordion items uncontrolled by adding the defaultValue prop on the items. This will open an accordion item without user interaction, and can be used on both type single and multi accordions.
Custom Heading Label
My Heading is an h4!
My Heading is an h5!
My Heading is an h6!
import { component$ } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<Accordion.Root class="w-full">
<Accordion.Item class="border-b">
<Accordion.Header as="h4">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>I'm an h4</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">My Heading is an h4!</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h5">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>I'm an h5</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">My Heading is an h5!</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h6">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>I'm an h6</span>
<span class="flex pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">My Heading is an h6!</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
});
By default, when using the Accordion.Header
component, it's rendered as an h3
tag. You can render your heading of choice by using the as prop.
Selected Index
Absolutely! You can reach out to us in the Qwikifiers discord.
According to the 2023 stack overflow survey, it's close to the amount of people learning Remix already!
A group of active contributors in the Qwik ecosystem!
Selected Index: X
import { component$, useSignal } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
export default component$(() => {
const selectedIndexSig = useSignal(0);
return (
<>
<div class="flex w-full flex-col items-center gap-4">
<Accordion.Root
class="w-full"
onSelectedIndexChange$={(index: number) => {
selectedIndexSig.value = index;
}}
>
<Accordion.Item class="border-b">
<Accordion.Header>
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>Can I contribute to Qwik UI?</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
Absolutely! You can reach out to us in the Qwikifiers discord.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header>
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>How many people are learning Qwik?</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
According to the 2023 <strong>stack overflow survey</strong>, it's close
to the amount of people learning Remix already!
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header>
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>What's the Qwikifiers discord?</span>
<span class="flex pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">A group of active contributors in the Qwik ecosystem!</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<p>
Selected Index: {selectedIndexSig.value === -1 ? 'X' : selectedIndexSig.value}
</p>
</div>
</>
);
});
onSelectedIndexChange$
will keep track of the current selected index. It can be useful for when you want to programmatically change something based on a user's interaction.
Focused Index
Yes! Since 1.0 back in May, Qwik apps are great for production.
Because you're doing less work! Thanks to resumability we execute JavaScript on interaction.
Check out Qwik-React! It allows you to partially hydrate React components into your Qwik app.
Focused Index: X
import { component$, useSignal } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
export default component$(() => {
const focusedIndexSig = useSignal(0);
return (
<>
<div class="flex w-full flex-col items-center gap-4">
<Accordion.Root
class="w-full"
onFocusIndexChange$={(index: number) => {
focusedIndexSig.value = index;
}}
>
<Accordion.Item class="border-b">
<Accordion.Header>
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>Is Qwik Production Ready?</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
Yes! Since 1.0 back in May, Qwik apps are great for production.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header>
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>Why is Qwik so fast?</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
Because you're doing less work! Thanks to resumability we execute
JavaScript on interaction.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header>
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>What if I want to use React?</span>
<span class="flex pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
Check out Qwik-React! It allows you to partially hydrate React components
into your Qwik app.
</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<p>Focused Index: {focusedIndexSig.value === -1 ? 'X' : focusedIndexSig.value}</p>
</div>
</>
);
});
onFocusIndexChange$
will keep track of the current focused index. It can be useful for when you want to programmatically change something based on what the user focuses.
Dynamic
import { component$, useSignal, useStore } from '@builder.io/qwik';
import { Accordion } from '@qwik-ui/headless';
interface DynamicAccordionProps {
itemIndexToDelete?: number;
itemIndexToAdd?: number;
itemsLength: number;
}
export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {
const itemIndexToAdd = useSignal<string>('0');
const itemIndexToDelete = useSignal<string>('0');
// start off with some items
const items = [];
const newItem = { label: 'New Item', id: Math.random() };
for (let i = 0; i < itemsLength; i++) {
items.push({
label: `Original Item ${i + 1}`,
id: Math.random(),
});
}
const itemStore = useStore<{ label: string; id: number }[]>(items);
return (
<>
<div class="flex w-full flex-col items-center">
<div class="flex gap-4">
<label class="mb-4 flex flex-col-reverse items-center text-center">
<input
class="max-w-[50px] rounded-base bg-accent px-2"
type="text"
bind:value={itemIndexToAdd}
/>
<span>Index to Add</span>
</label>
<label class="mb-4 flex flex-col-reverse items-center text-center">
<input
class="max-w-[50px] rounded-base bg-accent px-2"
type="text"
bind:value={itemIndexToDelete}
/>
<span>Index to Delete</span>
</label>
</div>
<Accordion.Root class="w-full">
{itemStore.map(({ label, id }, index) => {
return (
<Accordion.Item id={`${id}`} key={id} class="border-b">
<Accordion.Header>
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
{label}
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="py-4 pt-0">index: {index}</Accordion.Content>
</Accordion.Item>
);
})}
</Accordion.Root>
<div class="flex gap-2 md:gap-4">
<button
style={{ color: 'green', marginTop: '1rem' }}
onClick$={() => {
if (itemStore.length < 6) {
itemStore.splice(parseInt(itemIndexToAdd.value), 0, newItem);
}
}}
>
<strong>Add Item</strong>
</button>
<button
style={{ color: 'red', marginTop: '1rem' }}
onClick$={() => {
if (itemStore.length > 2) {
itemStore.splice(parseInt(itemIndexToDelete.value), 1);
}
}}
>
<strong>Remove Item</strong>
</button>
</div>
</div>
</>
);
});
You can embrace reactivity, using signals, stores, and however else you'd like to use the Accordion with dynamic behavior.
When an Accordion Item is removed, a Visible Task runs that will clean up the DOM node in the browser, ensuring that you stay clear of race condition or memory leak issues.
If you'd prefer to add your own id to the Accordion Item with dynamic
behavior, you can add the id
prop to the Accordion Item. This can be useful when you'd
like the id value to be sync with your custom logic.
By default, the Accordion Item has a locally scoped id with Qwik's useId
hook. All children elements will be prefixed by its respective item id, followed by a dash and the element. For example, {id}-trigger
.
Accessibility
Keyboard interaction
Key | Description |
---|---|
Tab | |
Shift + Tab | |
Space / Enter | |
Up Arrow | |
Down Arrow | |
Home | |
End |
API
Accordion Root
Prop | Type | Description |
---|---|---|
behavior | string | Determines whether the Accordion will open one or multiple items at a time. |
collapsible | boolean | Will allow the accordion to collapse items if set to true. |
animated | boolean | Allows the trigger to close using the onAnimationEnd$ and onTransitionEnd$ event handlers. |
onSelectedIndexChange$ | function PropFunction<(index: number) => void> | An event hook that gets notified whenever the selected index changes. |
onFocusIndexChange$ | function PropFunction<(index: number) => void> | An event hook that gets notified whenever the focus index changes. |
Accordion Item
Prop | Type | Description |
---|---|---|
id | string | Allows the consumer to supply their own id attribute for the item and its descendants. |
defaultValue | boolean | Determines whether the Accordion Item will open by default. |
Accordion Header
Prop | Type | Description |
---|---|---|
as | union 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | Sets the heading tag of the Accordion Header (Rendered HTML) |
Common Built-in Props
Thanks to QwikIntrinsicAttributes
, you can use most if not all normal JSX props and handlers on the semantically correlated component. Here are some of the most common ones:
Prop | Type | Description |
---|---|---|
class | string | CSS classes you can apply |
style | string | CSS styles you can apply |
disabled | boolean | Disables the element |
onClick$ | function PropFunction<() => void> | A custom click handler that executes when the element is clicked. |
onKeyDown$ | function PropFunction<() => void> | A custom click handler that executes when the key is pressed down. |
onFocus$ | function PropFunction<() => void> | A custom click handler that executes when element is focused. |