Skip to main contentSvelteKit Components
Primitives
When to use the primitives
The stock consent components are built from a set of unstyled, accessible
building blocks that @c15t/svelte also exports. Reach for them when you
build your own preference dialog or settings page with the
headless getters and want the same keyboard and focus behavior
as the stock dialog. For the consent state itself, use getConsentManager();
the primitives know nothing about consent.
Their rules load with the stock ConsentDialog. A page that renders the
primitives without the stock dialog needs @c15t/svelte/styles.css: import it
and set styles={false} on the provider. Each part accepts class and passes
other HTML attributes to its element.
Compound components
Import each as one object and use its parts, such as Dialog.Root and
Dialog.Content. Every part is also exported on its own.
| Component | Parts | Root props |
|---|---|---|
Dialog | Root, Portal, Backdrop, Positioner, Content, Title, Description, CloseTrigger | open (bindable, default false), closeOnEscape (true), closeOnInteractOutside (true), trapFocus (true), preventScroll (false), lazyMount (false), unmountOnExit (false) |
Switch | Root, Control, Thumb, HiddenInput | checked (bindable, default false), disabled, type ('button') |
Tabs | Root, List, Trigger, Content | value (bindable), orientation ('horizontal'), loop (true), disabled |
Accordion | Root, Item, ItemTrigger, ItemContent | type ('single' or 'multiple', required), value (bindable), collapsible (false) |
Collapsible | Root, Trigger, Content, Indicator | open (bindable, default false), disabled |
PreferenceItem | Root, Trigger, Leading, Header, Title, Meta, Auxiliary, Control, Content | open (bindable, default false), disabled, noStyle |
Portal renders its children into another element, document.body by
default. Pass target as an element or a selector.
Actions
Three Svelte actions apply the same behavior to your own elements:
| Action | Use | Parameter |
|---|---|---|
focusTrap | use:focusTrap={open} | true, false, or { enabled, initialFocus }. Keeps Tab inside the element while enabled. |
scrollLock | use:scrollLock={open} | boolean. Stops the page scrolling behind the element. |
portal | use:portal or use:portal={'#modals'} | An element or selector, default body. Moves the element there and removes it when the component unmounts. |
The banner uses these three actions; the stock dialog uses Dialog.
Check your custom dialog
Open it with the keyboard only. Tab and Shift+Tab stay inside it, Escape closes it, and focus returns to the control that opened it. Each switch announces its name and state in a screen reader. See the headless page for the consent side of a custom dialog.