## Wi-Fi Networks (S—203)

A Wi-Fi picker: signal bars, lock icons, a password prompt that expands in place, connecting state and forget network.

- URL: https://sundaeui.dev/components/wifi-networks
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/wifi-networks.json`
- Tags: settings, network, signal, connect, password, wifi

Networks are sorted by signal. Choosing a secured one expands an inline password field with show/hide; open networks connect at once.
The connected network moves to the top with a check and a Forget action. A wrong password shakes and keeps the field open.

### Usage

```tsx
import { WifiNetworks } from '@/components/sundae/wifi-networks'

<WifiNetworks />
```

### Props

- `networks` (`Network[]`, required): SSID, signal 0–4, secured.
- `onConnect` (`(ssid: string, password?: string) => Promise<boolean>`): Return false to reject.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Device setup, kiosk and IoT onboarding flows, settings screens.

### When not to use

- Web apps that cannot actually join networks.

### Accessibility

- Each network is a button announcing name, signal strength and whether it is secured.
- Connection progress and errors are announced.
- Reduced motion removes the movement and keeps every state change.