## Feature Examples
### Structure
- description: `` renders nine points in a 3×3 grid: four corners, four edges and the center. Each point is a button named after its position. Unselected points appear as small dots. A selected edge or corner point shows an arrow pointing toward that side of the container, and a selected center point shows a filled dot.
- example:
```jsx
;
```
### Selection
- description: Control the selection with `value` and `onChange`. The component keeps no state of its own: `onChange` receives the clicked position and you pass it back through `value`. The positions follow the grid: - `top-left`, `top`, `top-right` - `left`, `center`, `right` - `bottom-left`, `bottom`, `bottom-right`
- example:
```jsx
() => {
const [position, setPosition] = React.useState('bottom');
return (
Selected: {position}
);
};
```
### Multiple selection
- description: Pass an array to `value` to select several positions at once, for example when an element is anchored to more than one side. `onChange` still reports the single position that was clicked, so add it to or remove it from the array yourself.
- example:
```jsx
() => {
const [positions, setPositions] = React.useState(['top', 'bottom']);
const toggle = (position) =>
setPositions((current) =>
current.includes(position)
? current.filter((item) => item !== position)
: [...current, position],
);
return ;
};
```
### Center selection
- description: The center point is shown by default. Remove it with `centerSelection={false}` when only edges and corners are valid targets, for example when anchoring an element to the sides of its container. The center cell stays empty and the other eight points keep their places.
- example:
```jsx
;
```
### Disabled
- description: Disable the whole picker with `disabled`, for example while the element's position is locked. The current selection stays visible, but no point can be clicked.
- example:
```jsx
;
```
### Disabled directions
- description: Block specific positions with `disabledDirection`. It accepts a single position or an array. Use it when some positions don't apply to the current element, for example the top edge when a header already occupies it, or everything but top and bottom for a full-width strip.
- example:
```jsx
;
```
## Common Use Case Examples
### Pin to screen
- description: In a layout panel, a dock lets users pin an element to a position on the screen so it stays in place while visitors scroll. Show the chosen position as text next to the grid so the choice is readable at a glance.
- example:
```jsx
() => {
const [position, setPosition] = React.useState('bottom-right');
const label =
position.charAt(0).toUpperCase() + position.slice(1).replace('-', ' ');
return (
|
Pinned to
{label}
|
);
};
```