# Label Manager block

> Labels manager list with inline create and edit form, color picker, and drag-to-reorder rows

Manage project labels in a sortable list: inline add and edit form with hex color picker Popover, drag-to-reorder rows, and delete confirmation. Uses ReUI Sortable plus shadcn Item, Input, Field, AlertDialog, Empty. For label, tag, and taxonomy UIs.

- Type: Pro block
- Category: [Editing](https://web.dev.reui.io/blocks/data-grid/editing.md)
- Page: https://web.dev.reui.io/blocks/data-grid/editing/data-grid-editing-1
- MCP: `get_block("data-grid-editing-1")`
- Built with: Alert Dialog, Button, Empty, Field, Icon Stack, Input, Item, Popover, Sortable
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A list of draggable label rows with one inline form to add or rename a label from 12 color swatches or a custom hex

## Agent notes

- `LABEL_RECORDS` seeds the labels that `LabelsView` keeps in `useState`; add, rename, delete and reorder never reach a server
- `handleSubmitLabel` silently rejects a duplicate title by returning false; show an error and call your API there
- `handleReorder` restamps `displayOrder` after `Sortable` hands back the new order; save that field from it

## When not to use

- Rows that only need drag handles, with no color picker, add form or delete confirmation: use [Sortable](https://web.dev.reui.io/components/sortable.md) (`get_component("sortable")`)
- Many records shown as table columns with sorting, filters and paging: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)

## Third-party libraries

- React Hook Form v7: [API reference](https://react-hook-form.com/docs), [docs](https://react-hook-form.com/get-started)
- React Hook Form resolvers v5: [API reference](https://github.com/react-hook-form/resolvers#api), [docs](https://github.com/react-hook-form/resolvers)
- Zod v4: [API reference](https://zod.dev/api), [docs](https://zod.dev/)
- dnd kit v6: [API reference](https://dndkit.com/legacy/api-documentation/context-provider/dnd-context/), [docs](https://dndkit.com/legacy/introduction/getting-started/), through ReUI Sortable (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)

## Install

```bash
npx shadcn@latest add @reui/data-grid-editing-1
```

## About Editing blocks

### When to use

- Admin tables whose values are typed into cells or rows, validated, then saved or discarded
- Spreadsheet work over long lists: cell ranges, paste, drag to fill and undo
- Small catalogs such as labels or pricing plans, where one record is edited and saved at a time

### When not to use

- Cell editing added to a table you already build from parts in your own layout: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Rows that are only browsed, filtered and paged, with no values changed in the cells: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- A plain list reordered by drag, with no form to add or rename its items: use [Sortable](https://web.dev.reui.io/components/sortable.md) (`get_component("sortable")`)

### Agent notes

- Every page.tsx renders an sr-only `h1` inside a centered `min-h-svh` main; remove that wrapper when the view sits in your own page
- Rows start from a data file constant held in `useState` or `useReducer`, and nothing reaches a server; call your API where each edit or save commits

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.