# `PhiaUi.Components.Sortable`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/interaction/sortable.ex#L1)

Sortable drag-and-drop list components for PhiaUI.

Provides `drag_handle/1`, `drop_indicator/1`, `sortable_list/1`, and
`sortable_item/1`. Pair `sortable_list/1` with the `PhiaSortable` hook for
full drag-and-drop reordering with keyboard navigation and ARIA announcements.

## Minimal example

    <.sortable_list id="tasks" on_reorder="reorder_tasks">
      <.sortable_item :for={{item, idx} <- Enum.with_index(@items)} id={item.id} index={idx}>
        {item.title}
      </.sortable_item>
    </.sortable_list>

## With drag handles

    <.sortable_list id="tasks" handle={true} on_reorder="reorder_tasks">
      <.sortable_item :for={{item, idx} <- Enum.with_index(@items)} id={item.id} index={idx}>
        <.drag_handle />
        {item.title}
      </.sortable_item>
    </.sortable_list>

# `drag_handle`

Renders a drag handle button with a 6-dot grip icon.

Place this inside a `sortable_item/1`. When `handle={true}` is set on the
parent `sortable_list/1`, only dragging from the handle initiates a reorder.

## Attributes

* `aria_label` (`:string`) - Defaults to `"Drag to reorder"`.
* `size` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `drop_indicator`

Renders a thin line that marks the drop position between sortable items.

The hook toggles the active state by setting `data-active` on the element.

## Attributes

* `orientation` (`:string`) - Defaults to `"horizontal"`. Must be one of `"horizontal"`, or `"vertical"`.
* `active` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `sortable_item`

Renders a single sortable list item.

Pass a `drag_handle/1` in the `:handle` slot (or inline in `inner_block`) if
using handle-based dragging. The `data-index` attribute is used by the hook
to calculate reorder positions.

## Attributes

* `id` (`:string`) (required)
* `index` (`:integer`) (required)
* `disabled` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)
* `handle`

# `sortable_list`

Renders a sortable list container backed by the `PhiaSortable` hook.

Set `handle={true}` when each item contains a `drag_handle/1` — the hook will
then only initiate a drag when the user grabs the handle, not the whole item.

The hook emits `on_reorder` (default `"reorder"`) with
`%{old_index: N, new_index: M, id: "dom-id"}`.

## Attributes

* `id` (`:string`) (required)
* `orientation` (`:string`) - Defaults to `"vertical"`. Must be one of `"vertical"`, or `"horizontal"`.
* `handle` (`:boolean`) - Defaults to `false`.
* `on_reorder` (`:string`) - Defaults to `"reorder"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*