## Feature Flag (S—159)

A feature-flag card: per-environment switches and a rollout percentage you drag in steps, with a staged Save.

- URL: https://sundaeui.dev/components/feature-flag
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/feature-flag.json`
- Tags: environments, settings, toggle, developer, rollout, feature-flag

Each environment (Development, Staging, Production) has its own switch. Production adds a rollout slider that snaps to 1, 5, 10, 25, 50 and 100 percent and shows roughly how many users that is.
Changes are staged: a bar appears with what will change and Save / Discard, so nothing ships by accident.

### Usage

```tsx
import { FeatureFlag } from '@/components/sundae/feature-flag'

<FeatureFlag />
```

### Props

- `flag` (`{ key: string; description: string }`, required): Flag identity.
- `envs` (`{ id: string; label: string; on: boolean }[]`, required): Environments.
- `users` (`number`): Production user count for the estimate.
- `onSave` (`(state) => void`): Called on Save.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Internal admin tools, developer platforms, release management.

### When not to use

- End-user settings.

### Accessibility

- Switches are role="switch"; the rollout is a slider with aria-valuetext “25 percent, about 3,100 users”.
- The pending-changes bar is announced.
- Reduced motion removes the movement and keeps every state change.