Teeth Selector

I'm working on a form used by dental technicians to propose and plan procedures, and this component allows the selection of teeth. While a typeahead/multiselect would do, I wanted to try something more graphically interesting and less decontextualized. Were the UI to rely on a text input, it'd lack context of which teeth are the most common and in which scenario — for example, prioritizing primary teeth if a procedure is for a pediatric dentist, prioritizing secondary teeth for adult patients, etc.

The control outputs an array of UNS teeth numbers. Primary teeth are A-T, secondary teeth 1-32, and supernumerary teeth are secondary + 50.

For the imagery, I purchased a set of teeth vector outlines on Adobe Stock and heavily styled them myself.

I built this prototype in Origami. It's imperfect and does not fully represent implementation. Ideally, there'd be an additional dismissal transition for the menu, and potentially it would follow the mouse between teeth instead of opening/closing. This is intended to communicate functionality for displaying the primary, secondary, and supernumerary teeth.

Before — this shows the UNS teeth codes plus a single supernumerary tooth per quadrant.

After: