# Consent flap

A plate pinned to the page foot, hinged along its top edge. Closed, it reads as one line with Essential only, Choose and Accept all. Press Choose and the face tilts up while the compartment under it opens, baring three rocker switches, Necessary locked on. Press Save choices and the panel shuts and the face swings back down, latching flat with a small click.

Kit part · With the Kit · https://tactileui.dev/parts/consent-flap

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

One native form holds the face and the panel together, so every key, whichever one is pressed, is a submit that this part’s own handler reads and answers for. Lifting is a class and a CSS transform, rotateX on the face with its hinge pinned to its top edge by transform-origin, timed with the panel easing from a shut max-height to its content’s height so nothing jumps. Shutting adds is-latching for one short overshoot, a cubic-bezier past flat and back, which reduced motion drops to an instant state change. No external dependency and no storage read or write.

## Variants

- Open · the panel shown
- A choice already made · Analytics on
- Your own categories

## States

- Shut
- Lifted
- Latching

## Props and options

| Name | Kind | Description |
| - | - | - |
| [data-consentflap-toggle] | attribute | The key that lifts and lowers the face, pointing at the panel by id. |
| [data-consentflap-action] | attribute | On a submit key: which choice the form hands over when pressed. |
| hidden | attribute | Set while the face is shut, so the switches are out of the tab order until it lifts. |

## Usage notes

Press Choose: the face lifts and three switches show, Necessary locked on. Set Analytics and Marketing, then press Save choices, and the face latches back down. Essential only and Accept all decide at once, with the face shut.

## Accessibility

- The lifting key carries aria-expanded and aria-controls, naming the panel it opens: a disclosure, read and worked the way any expandable key is.
- The switches sit in a fieldset with a legend, Necessary printed and checked but disabled, so a screen reader hears it is always on, not a choice to make.
- The panel carries hidden while shut, so its switches leave the tab order entirely rather than sitting there unreachable; lifting the face returns them to it.
- Every switch is inside a label that names it (“Analytics”), the same pattern as the rocker on its own page.
- The panel closes only from its own Save key: no outside press, no Escape, so a choice about cookies is never lost to a stray key or click.
- Reduced motion keeps the shut and lifted states and drops the hinge tilt and the latch’s small overshoot; the choice still saves the same.

## Related parts

- [Banner](https://tactileui.dev/parts/banner): A strip the width of the page, above everything, for one announcement: a lamp, one line, an optional key that goes somewhere and a dismiss key. It is a raised plate, not a recess, so it reads as part of the frame and not as a message in the page. It is a labelled region, there on load, and says its thing once. When it goes it closes like a drawer, so the page glides up by its height instead of jumping.
- [Alert](https://tactileui.dev/parts/alert): A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
- [Switch](https://tactileui.dev/parts/switch): On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
- [Fieldset](https://tactileui.dev/parts/fieldset): Related fields under one engraved legend, with one hint and one error line for the group. It is the browser’s own fieldset and legend, so the group has a name for a screen reader and a disabled fieldset disables every field inside. The legend runs on into a groove cut in the plate; the error waits at the foot, not drawn, until it has something to say.