Consent Categories

Cookie Preferences
NecessaryRequired
Functional
Analytics
Marketing
About this piece

Consent Categories

Cookie categories a visitor decides on one at a time, the essential row held on and locked while the others switch under a moving choice.

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Cookie Preferences
NecessaryRequired
Functional
Analytics
Marketing
Usage
import { Form39 } from "@/components/beste/component/form39";

<Form39
  categories={[{"label":"Necessary","enabled":true,"required":true},{"label":"Functional","enabled":true},{"label":"Analytics","enabled":false},{"label":"Marketing","enabled":false}]}
/>

Usage

The import and the props worth knowing about, in one place.

import { Form39 } from "@/components/beste/piece/form39";

<Form39
  surface="card"
  bordered={true}
  inverted={false}
  title="Cookie Preferences"
  requiredLabel="Required"
  categories={[
    {
      "label": "Necessary",
      "enabled": true,
      "required": true
    },
    {
      "label": "Functional",
      "enabled": true
    },
    {
      "label": "Analytics",
      "enabled": false
    },
    {
      "label": "Marketing",
      "enabled": false
    }
  ]}
  stepMs={620}
/>

More Form pieces

View all Form

Consent Row

Legal consent card with a custom checkbox, inline underlined policy links, and a red asterisk when required.

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

A compact settings card listing labeled rows, each with an accent on/off toggle switch.

Segmented Control

Pill-grouped segmented control with inset muted track and a raised card under the active choice.

Mira & Co.
Shown on invoices and in the team directory.

Labeled Input

Standard text field with a label on top and a muted helper line under the control.

Two-factor authenticationRequire a verification code at sign-in.

Toggle Switch

Setting row with label, supporting copy, and a sliding switch that turns emerald when on.

Mira
Beste

Input Row

Two inputs arranged side by side on a responsive grid for first/last names and paired fields.