# Privacy choices
> Privacy choices card whose shield fills as categories are allowed; saving stamps it and folds the card into a small Change pill.
- Element: `<hf-consent>`
- React: `import { HfConsent } from "@/components/lumesec/hf-consent"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-consent.json
- Page: https://elements.lumesec.ai/components/pixel-hd/consent



Live preview: https://elements.lumesec.ai/view/hf-consent

```html
<hf-consent></hf-consent>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/hf-consent
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-consent.json
```

## Usage

React:

```tsx
import { HfConsent } from "@/components/lumesec/hf-consent";

export function Example() {
  return (
    <HfConsent />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-consent.js"></script>

<hf-consent></hf-consent>
```

## Behaviour

The shield fills as you allow more categories. Saving stamps it with a ring and the card folds into a small “Change” pill.

## API reference

### Attributes

| Attribute     | React prop    | Type     | Default                                                                 | Description                                 |
| ------------- | ------------- | -------- | ----------------------------------------------------------------------- | ------------------------------------------- |
| `label`       | `label`       | `string` | `Your privacy choices`                                                  | Card title. Read once on connect.           |
| `description` | `description` | `string` | `We only use what you allow. You can change this any time in Settings.` | Text under the title. Read once on connect. |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event     | React prop  | Detail                                             | Description                                                                                                          |
| --------- | ----------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `consent` | `onConsent` | `{ analytics: boolean, personalisation: boolean }` | Fires on Reject all, Save choices or Accept all with the chosen categories. Necessary is always on and not reported. |

## Accessibility

* The card is a `role="region"` labelled `Privacy choices`.
* Categories are native checkboxes styled as switches, each inside a `<label>` with its description; Necessary is checked and disabled.
* After saving, the card is replaced by a pill reading `Saved · <n> of 3 categories on` with a Change button; focus is not moved to it. Change moves focus to Save choices.
* The shield is drawn on an `aria-hidden` canvas.
* Reduced motion: the shield level changes at once, there is no stamp ring and the card folds immediately.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec`, `--lumesec-foreground`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-muted`, `--ui-on-accent`, `--ui-raised`, `--ui-surface` and `--ui-track`.

## Notes

* The component does not store choices or set cookies; persist the `consent` detail yourself. It always starts with Analytics and Personalisation off.
* The categories are fixed: Necessary, Analytics and Personalisation.
* Without reduced motion, the shield redraws every frame while the element is visible.