Tooth picker

A React component in Beamline's Form controls category.

Teeth and their surfaces for one procedure. The arch by Universal number as you face the patient (upper 1–16, lower 32–17; supernumerary teeth on their own tab), missing teeth drawn but never chosen. The focused tooth's surfaces on a radial picker, named for that tooth (incisal and facial on front teeth, mesial always toward the midline). What the procedure still needs is said before applying; Apply to the focused tooth and Apply to all selected are apart, and teeth it can't go on stay selected, each with its reason. The chart keeps its anatomical orientation in right to left.

Use it for

Placing a procedure, condition or finding on one or several teeth and their surfaces.
Any picker where the target is a tooth and the details depend on which tooth it is.

Not for

Measurements per site across the arch (probing-chart).
Picking a region of a picture in general (image tools).

Anatomy

dentition switch: permanent or supernumerary; which teeth are chosen
the arch: upper 1–16 and lower 32–17 as you face the patient, the patient's right and left named, the midline gap
surfaces: a radial picker for the focused tooth (buccal or facial, lingual, mesial toward the midline, distal, occlusal or incisal in the middle), the chosen ones named
needs: what the procedure still needs
refused: a tooth it can't go on, with its reason
actions: apply to the focused tooth, apply to all selected

States

tooth: chosen (info tint), focused (ink ring), applied (success tint), not applied (warning), missing (dashed, not choosable)
surface: chosen (info), not chosen; no tooth focused (the picker off)
needs: no tooth yet, or surfaces still needed (Apply waits)
applied: the teeth said; refused teeth stay chosen with their reasons
narrow: each arch in two rows of eight
right to left: the page mirrors, the chart keeps its anatomical orientation
reduced motion: no tint transitions

Keyboard

Tab through the teeth; Enter or Space chooses a tooth, or focuses one already chosen; Tab to the surfaces, Space or Enter toggles one

Motion

Tints ease between states over the standard duration. Nothing runs at rest.

Props

Prop	Type	Default	Description
`value`	`ToothSelection`	—	Controlled selected value; omit to use defaultValue.
`defaultValue`	`ToothSelection`	—	Initial selection when uncontrolled; omitted by default.
`onValueChange`	`((value: ToothSelection) => void)`	—	Reports the selected value after a change; no callback by default.
`missing`	`number[]`	—	Teeth that are missing: drawn, never chosen.
`procedure`	`string`	—	What is being placed ("Composite, two surfaces"), named in what it still needs.
`needsSurfaces`	`number`	—	How many surfaces the procedure needs; Apply waits until that many are chosen. Default 0.
`canApply`	`((tooth: number, surfaces: ToothSurface[]) => string \| null)`	—	Whether the procedure can go on a tooth: null when it can, otherwise the reason it can't.
`onApply`	`((targets: ToothTarget[]) => void)`	—	Receives the teeth it applies to; teeth it can't apply to stay chosen with their reason.
`applied`	`number[]`	—	Teeth the procedure is already on, marked.
`labels`	`Partial<{ teeth: Message; permanent: Message; supernumerary: Message; upper: Message; l…`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Used in

Procedure picker

Import

import { ToothPicker } from "@beamline/tooth-picker";

Get it

Tooth picker is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent