Cookie Preferences Sheet

ProNew

A bottom sheet for consent with a locked "necessary" row, switches for optional categories, and Accept all, Reject optional and Save choices buttons of equal weight. Use this when a phone visitor must choose cookie or tracking categories before you load optional scripts.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

defaultOpen

Guide and examples

When to use it

Use it when a phone visitor must choose cookie or tracking categories before you load optional scripts.

Do not use it for a one-line notice that needs no choice, or as a way to push people to accept (the buttons must be equal).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`categories`	`ConsentCategory[]`	`required`	`{ id, label, description, required? }`.
`onSave`	`(accepted: string[]) => void`	`required`	Called with the ids of the accepted categories.
`defaultOpen`	`boolean`	`false`	Open on mount.

Accessibility

Each switch is labelled and described by its explanation; the required category is a disabled, checked switch with the reason in text.
Accept all, Reject optional and Save choices have the same size and weight, so refusing is as easy as accepting.
The sheet is not dismissible by the overlay: a choice is needed, and Escape is the same as Reject optional.

Testing

The pattern ships with a Testing Library test (cookie-preferences-sheet.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone visitor must choose cookie or tracking categories before you load optional scripts.

Do not use it for a one-line notice that needs no choice, or as a way to push people to accept (the buttons must be equal).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`categories`	`ConsentCategory[]`	`required`	`{ id, label, description, required? }`.
`onSave`	`(accepted: string[]) => void`	`required`	Called with the ids of the accepted categories.
`defaultOpen`	`boolean`	`false`	Open on mount.

Accessibility

Each switch is labelled and described by its explanation; the required category is a disabled, checked switch with the reason in text.
Accept all, Reject optional and Save choices have the same size and weight, so refusing is as easy as accepting.
The sheet is not dismissible by the overlay: a choice is needed, and Escape is the same as Reject optional.

Testing

The pattern ships with a Testing Library test (cookie-preferences-sheet.test.tsx) that drives it through roles and the keyboard.