Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Privacy Settings Sheet for React

A Privacy button opens four privacy checkboxes, three of them on, and a destructive Delete Account button under them.

The title is Privacy Settings. Public Profile, Allow Search Indexing, and Show Activity Status start checked. Show Email Address does not. Delete Account uses the destructive color.

Use it for privacy toggles plus one action that cannot be undone. Confirm Delete Account in an Alert Dialog before anything is removed. In React, Base UI does not delete the account.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Privacy</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Privacy Settings</SheetTitle>
      <SheetDescription>
        Control your privacy and data preferences
      </SheetDescription>
    </SheetHeader>
    <FieldGroup className="gap-4 p-4">
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="privacy-public-profile">
          Public Profile
        </FieldLabel>
        <Checkbox defaultChecked id="privacy-public-profile" />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="privacy-show-email">
          Show Email Address
        </FieldLabel>
        <Checkbox id="privacy-show-email" />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="privacy-search-indexing">
          Allow Search Indexing
        </FieldLabel>
        <Checkbox defaultChecked id="privacy-search-indexing" />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="privacy-activity-status">
          Show Activity Status
{/* The rest of the file is under Installation. */}

FAQ

Which privacy boxes start checked?

Public Profile, Allow Search Indexing and Show Activity Status start checked. Show Email Address starts unchecked.

What does Delete Account do in this demo?

Nothing yet: it's a full-width Button with variant="destructive" and no handler. Open a confirmation from it before you call your API, since the action can't be undone.

Why is Privacy Settings a SheetTitle?

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Privacy Settings, and the description reads Control your privacy and data preferences.

How does the Privacy button open the sheet?

The outline button labeled Privacy is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

How do I close the privacy sheet?

The corner close button is on because showCloseButton defaults to true. Escape and a click on the overlay close the sheet too, and focus goes back to the trigger. To close it from your own code, for example after the account is deleted, control the open state: Pass open to Sheet; onOpenChange receives the next boolean.

Which edge does it use?

The right: SheetContent leaves side unset. Set side="left" to open it from the start of the page instead.

API Reference

Sheet

No extra props in this demo. The rest is on the Sheet page.

Button

Sets variant="outline" and variant="destructive". The rest is on the Button page.

Field

Sets orientation="horizontal", htmlFor="privacy-public-profile", htmlFor="privacy-show-email", htmlFor="privacy-search-indexing" and htmlFor="privacy-activity-status". The rest is on the Field page.

Checkbox

Sets defaultChecked, id="privacy-public-profile", id="privacy-show-email", id="privacy-search-indexing" and id="privacy-activity-status". The rest is on the Checkbox page.

All 29 sheet examples