Avatar Picker
アバターピッカー
A strip of avatars that behaves the way a set of radios does: the group takes one Tab stop, the arrows move the selection, and Home and End jump to the ends. Only the checked thumbnail carries tabindex↗↗ 0 — the roving tabindex pattern the radiogroup role↗↗ expects — so a keyboard never has to walk through every face to get past the picker. The artwork is a prop: pass any node per avatar, and initials are drawn when you pass none, which keeps the component about the selection rather than about the illustrations. Adapted from Kokonut UI↗↗ under the MIT licence.
Installation
Install the following dependencies:1
npm install framer-motionnpm install lucide-reactCopy and paste the following code into a new component file:2
How to use it3
Props
AvatarPicker
| Name | Default | Description |
|---|---|---|
| avatars | 5 monograms | { id: string, label: string, art?: ReactNode }[] The choices; art falls back to the label's initials |
| defaultValue | first avatar | string Id selected on mount |
| onChange | — | (id: string) => void Called with the id whenever the selection moves |
| label | "Choose an avatar" | string Accessible name of the group |
| dark | false | boolean Render the dark palette |