App Preferences Sheet for React

Enable Notifications, Share Analytics, Auto Update and Dark Mode. Auto Update starts checked; the other three start unchecked.

Inside each Checkbox: they're uncontrolled, and the sheet has no save button, so nothing reads them. Make them controlled, or put them in a form, to send the values somewhere.

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 App Preferences, with Customize your app experience under it.

The outline button labeled Preferences 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.

Each row is a Field with orientation="horizontal" and justify-between, so the label starts the row and the checkbox ends it, on either reading direction. The rows sit in a FieldGroup under SheetHeader.

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.