AnchorGrid
A 3×3 grid of dots for picking where something sits: a corner, an edge or the center.
import { AnchorGrid } from "@butteryui/react";Demo
When to use it
Use it for
- Placing content inside a frame: a title on a slide, a caption on a picture
Not for
- Exact positions: use NumberFields for x and y
Examples
Caption corner
A caption's corner kept in state, with each anchor named in French for screen readers and beside the grid.
En bas à droite
Locked layer
An anchor grid that's disabled while its layer is locked, with the switch that unlocks it.
Unlock the logo to move it
Logo position
An anchor grid that starts at the center and reports each pick, by press or with the arrow keys.
Logo anchored center
Title placement
An anchor mapped to where a title sits on its slide, through CSS place-items, gliding there on spring.smooth.
Anchored center
Variants and states
Placement
Press anywhere in the box or use the arrow keys; the knob slides to the new dot on spring.snappy.
center
Disabled
Props
AnchorGrid
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | What the anchor places, such as "Anchor". It names the group. | |
value | "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right" | The chosen anchor. Pair with onValueChange to control it. | |
defaultValue | "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right" | "center" | The anchor at first when uncontrolled. Defaults to "center". |
onValueChange | ((value: Anchor) => void) | Called with the anchor chosen. | |
disabled | boolean | Keeps it from changing. | |
labels | Partial<Record<Anchor, string>> | Each anchor's name for screen readers, for other languages. |
It also takes Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">.
Also exported
| Export | Description |
|---|---|
anchors: readonly Anchor[] | Every anchor, row by row from the top left. |
Accessibility
A radiogroup named by label with nine radios ("Top left" … "Bottom right"), one tab stop. Arrow keys move in two dimensions, choosing as they go, and stop at the edges; Home and End reach the corners. The whole box takes a press and picks the nearest dot, since each dot is too small to aim at (data-bt-target="group").
| Keys | What they do |
|---|---|
| Arrow keys | Moves to the next dot in that direction and chooses it, stopping at the edges |
| Home or End | Chooses the top left or the bottom right dot |
Motion
Its selection indicator slides to the chosen option on `spring.snappy`, inside one track.
With reduced motion: The knob shows on the new dot at once instead of sliding there.
Layout
A fixed 43px square box with the nine dots 11.5px apart, which keeps its size in any row. The whole box is one hit area: a press anywhere in it picks the nearest dot.
Related
See it in the Deckhand demo.