# List groups A column of items in one frame - plain rows, or links and buttons to choose from - with the current one and the unavailable ones marked by the same attributes the browser reads. ## Examples `list-group` on a list, `list-group-item` on each item. ```html ``` ### Links and buttons `list-group-item-action` makes an item a choice. The current one is `aria-current` - `"page"` for a link to the page shown, `"true"` otherwise; one that cannot be chosen is a `disabled` button, or a link without `href` and with `aria-disabled="true"`. ```html
``` ### Flush, numbered, with counts `list-group-flush` drops the frame, for a list inside a card: its rows' words line up with the card's. A flush list of `list-group-item-action` rows keeps the rows' room, so a hover's tint and the current row's bar stand off the words - as in [a card that scrolls](card.md#card-scrolling). `list-group-numbered` on an `
    ` numbers the items. ```html
    1. North Bay Marine Park28
    2. Turtle Cove11
    3. The Five Islands3
    ``` ### Headings `list-group-header` on an item that is not one: a small heading over the items that follow it, in capitals, on the page's own background. ```html ``` ### Side by side `list-group-horizontal` sets the items in a row; with a width prefix, from that width of the region on: `md:list-group-horizontal`. ```html ``` ### With checks ```html
    ``` ### Filtered by a search A search field with `data-filter` naming a region hides, as the person types, the region's items whose words lack one of the typed words - case and accents aside: list items, items with a `data-value`, [media tiles](media.md), [tree items](tree.md) and table rows; an item's `data-search` stands in for its text. A tree keeps the ancestors of a match and opens their groups. An element with `data-filter-empty` in the region shows when nothing matches. The count is said once the typing pauses, in the page's count text `found`; `Esc` in the field clears it. A hidden item carries `data-filtered`. ```html ``` ### Reordering A list with `data-reorder` naming a hidden field moves its items, each with a `data-value`, by a `drag-handle`: a button opening the list's menu of moves, whose items carry `data-move` - `up`, `down`, `first`, `last` - or the pointer dragging the handle: a lifted copy follows the pointer, the item's place - an empty slot - goes where it will land, and the other items glide aside; near the edge of the box the list scrolls in, it scrolls, and `Escape` takes the item back. A move by the menu glides too; with reduced motion nothing glides. Each move ends with the focus back on the handle, and the page's text `moved` says the new place. Then `redz:move` fires on the item: a page that saves cancels it and answers with a promise - refused, the move is undone and the page's words are said; left alone, hidden fields beside the list hold the new order for the form. ```html ``` A table's rows move the same: `data-reorder` on the `tbody`, a `data-value` on each row and its `drag-handle` in a cell. The hidden fields and the polite status go after the table. ```html
    ItemAmount
    Cement12,400
    Steel bars38,900
    Labor21,000
    ``` In a grid of more than one column, or a row, the pointer drags in two dimensions: the item under it takes the dragged one before or after it, by the half of it the pointer is in. The menu's moves go earlier and later in the order - give them those words. ```html
    Sales
    Bookings
    Tasks
    Weather
    ``` ```js document.addEventListener('redz:move', (event) => { event.preventDefault(); const {item, parent, position} = event.detail; event.detail.respondWith(fetch('/stops/' + item.dataset.value + '/place', {method: 'POST', body: new URLSearchParams({parent: parent?.dataset.value ?? '', position})}) .then((answer) => answer.ok || Promise.reject('The stop could not be moved'))); }); ``` ## States ## Keyboard and accessibility - Links and buttons keep their own keys: `Tab` from one to the next, `Enter` - and `Space` on a button - to choose. A list of links that moves between pages is a `