# Padlock

A gunmetal padlock whose shackle lifts as a code is checked and pops free when it is right.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/padlock
```

## Usage

```tsx
import { Padlock } from '@/components/fetaui/padlock'

export function Example() {
  return <Padlock status="checking" aria-label="Padlock" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| status | locked, checking, open, error | locked |
| width | px | 180 |
| aria-label | string |  |
| announce | boolean | false |
| labels | Partial<Record<status, string>> | Locked, Checking, Unlocked, Could not unlock |
| animated | boolean | true |
| className | string |  |

## When to use

- As the picture for a code or PIN step, driven by your own check.
- Inside a card that already says what happened in text.

## When not to use

- As a control: it does nothing on its own.
- As the only sign of an error. Say it in words too.

## Accessibility

- Decorative by default, and role img when you pass aria-label.
- With announce, a polite live region reads the status words on each change. Leave it off when the page already announces the result.

## Motion

- Checking lifts the shackle 10 px on the press spring and a faint glint crosses the face every 2.2 s. The glint pauses offscreen.
- Open pops the shackle 28 px on the stamp spring with a 4 degree swing about the left leg, over 560 ms. The right leg comes free, the body gives 2.5 px, and the rings light green 35 ms apart.
- Locking from open lands on the snap spring and the body takes the click 100 ms later.
- Error tugs the shackle 6 px and holds, then the lock shakes once over 360 ms while the rings light red.
- With reduced motion, the shackle fades out and back in its new place over 200 ms and the rings only fade. With animated false nothing moves.