# rind-ui

> Headless React components: behaviour, accessibility and state, styled through data-* attributes.

Use rind-ui for React UI that must work with keyboard and screen readers when you own the styles. Every component ships a test driver (Testing Library and Playwright), so an agent can verify what it builds.

## Quick start

```sh
pnpm add @rind-ui/react            # React 19+
pnpm add -D @rind-ui/testing       # drivers, for tests
```

```tsx
import { Switch } from "@rind-ui/react"

<Switch.Root>
  <Switch.Control><Switch.Thumb /></Switch.Control>
  <Switch.Label>Dark mode</Switch.Label>
</Switch.Root>
```

```css
[data-scope="switch"][data-part="control"][data-state="checked"] { background: black; }
[data-focus-visible] { outline: 2px solid hotpink; }
```

```ts
import { getSwitch } from "@rind-ui/testing"
const dark = getSwitch(screen, { name: "Dark mode" })
await dark.toggle()
expect(await dark.isChecked()).toBe(true)
```

Rules: compose the documented parts; never re-implement focus, keyboard or ARIA behaviour; give every control and group an accessible name; style `data-*` attributes (focus with `[data-focus-visible]`). Each component page below lists its parts, props, attributes, keyboard and driver.

## Guides

- [Announcements](https://rind.watermelon-studio.it/docs/announcements.md): Some changes have no focus move to carry them — "3 results", "Copied", a streamed answer. Components announce them through the environment's `Announcer`; they never render their own live region.
- [Autosize](https://rind.watermelon-studio.it/docs/autosize.md): A textarea that takes the height of its content, used by Text Field's `autosize` and later by Prompt Input and Editable. Native first, measured only where the browser cannot do it.
- [Collections](https://rind.watermelon-studio.it/docs/collections.md): Listbox, Select, Combobox, Menu, Tabs, Tree View and every other component that shows a set of items share one collection layer in `@rind-ui/core`: a key-based model of the items, selection, navigation, typeahead and the props of the collection parts. A component spreads these pieces into its machine; it never re-implements them.
- [Colour model](https://rind.watermelon-studio.it/docs/color-model.md): The [Color Picker](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/components/color-picker.md) and every one of its parts share one model, in `@rind-ui/core`: a colour is plain data — `{ space, channels, alpha }` in `rgb`, `hsl` or `hsb` — and every operation is a function, so a colour survives `structuredClone`, JSON and a server render.
- [control-label](https://rind.watermelon-studio.it/docs/control-label.md): The shared Label and Description of a labelable control (Checkbox, Switch, group items, radios).
- [Implementing field-control](https://rind.watermelon-studio.it/docs/field-control.md): How a form control works inside a Field. Every rind-ui form control (Text Field, Checkbox, Select, …) does this, and your own control can too: the Field then labels, describes, validates and disables it like a built-in one.
- [Focus and input modality](https://rind.watermelon-studio.it/docs/focus-and-modality.md): Every focusable part carries `data-focus` while focused and `data-focus-visible` only when the focus came from the keyboard or from assistive technology, so a theme draws the focus ring for keyboard and screen-reader users and never after a mouse click.
- [hidden-form-input](https://rind.watermelon-studio.it/docs/hidden-form-input.md): The shared behaviour that lets a control that is not a native form field (Checkbox, Switch, [Checkbox Group](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/components/checkbox-group.md), [Radio Group](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/components/radio-group.md), later Select) take part in forms. Each control renders one visually hidden native input as the last child of its Root, `aria-hidden` and out of the Tab order.
- [Collapsed content that find-in-page can reach](https://rind.watermelon-studio.it/docs/hidden-until-found.md): Collapsible content can render closed as `hidden="until-found"`: hidden from view and from assistive technology, but the browser's find-in-page (and fragment links) can still match it. When a match is found the browser fires `beforematch`; the component opens with reason `find-in-page` and marks the content `data-reveal="find-in-page"`.
- [Keyboard, composition and right-to-left](https://rind.watermelon-studio.it/docs/keyboard-and-rtl.md): Components read keys as **logical keys** — `NEXT`, `PREV`, `FIRST`, `LAST`, `PAGE_NEXT`, `PAGE_PREV`, `EXPAND`, `COLLAPSE`, `INCREASE`, `DECREASE`, `ACTIVATE`, `DISMISS`, `CONTEXT_MENU` — so direction, orientation and platform are handled once.
- [Labels](https://rind.watermelon-studio.it/docs/labels.md): Every rind-ui label follows the same rules, whether it is the standalone [Label](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/components/label.md), a control's own Label part (Checkbox, Switch) or a Field's Label. The browser's native `<label>` does the naming and the activation; rind-ui only adds what native labels get wrong.
- [Messages, locale and RindProvider](https://rind.watermelon-studio.it/docs/messages-and-provider.md): Every user-visible string a component owns (labels it generates, hints, announcements) is a typed **message** with an English default, overridable per component or for a whole tree. Numbers, plurals, sorting and sentence splitting use `Intl` with the component's locale (`format.number`, `plural`, `format.collator`, `format.segmenter`; instances are cached).
- [number-parsing](https://rind.watermelon-studio.it/docs/number-parsing.md): The shared capability that turns text a user types or pastes into a number and back, for a locale and `Intl.NumberFormat` options. Used by [Number Input](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/components/number-input.md); later numeric fields reuse it. It wraps `@internationalized/number` and adds what that lacks: Persian digits, group separators and literal prefixes in partial input, no silent rounding, and value text for assistive technology.
- [Overlays](https://rind.watermelon-studio.it/docs/overlays.md): Dialogs, popovers, menus and drawers share one layer stack per document that decides who is on top, what dismisses what, where focus goes, what is inert and whether the page scrolls; a component only registers its layer.
- [Positioning](https://rind.watermelon-studio.it/docs/positioning.md): Popover, Menu, Select, Combobox, Tooltip and every other popup anchored to something share one positioning capability in `@rind-ui/core` (`dom/position`, built on `@floating-ui/dom`). A machine tracks its popup only through `env.position`, from an effect scoped to its open state; coordinates and sizes go straight to CSS custom properties and only the discrete results (side, align, anchor hidden, first placement) come back as a `POSITION.PLACED` event.
- [Press, hover and long press](https://rind.watermelon-studio.it/docs/press-and-hover.md): `usePress` (React) / `createPress` (core) turn pointer, mouse, keyboard and screen-reader input into one stream of machine events, so a part activates the same way however it is used: `PRESS.START`, `PRESS.UP`, `PRESS.END`, `PRESS`, `PRESS.CANCEL`, plus `LONG_PRESS` and `CONTEXT_MENU` when enabled.
- [Testing accessibility](https://rind.watermelon-studio.it/docs/testing-accessibility.md): `@rind-ui/testing` checks accessibility as part of every model-based test, not as a separate suite.
- [VisuallyHidden](https://rind.watermelon-studio.it/docs/visually-hidden.md): Content read by assistive technology but not shown — never `display: none` or `visibility: hidden`, which also hide it from screen readers.
- [White-label theming](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/theme/white-label.md): rind-ui is themed with CSS custom properties in three tiers, scoped by the `data-rind-theme` attribute. One brand colour re-skins every component, light and dark, and a multi-tenant page can show several brands side by side. Token names: [token reference](https://rind.watermelon-studio.it/theme/tokens.md). Building validated themes: [builder.md](builder.md).
- [Theme builder](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/theme/builder.md): `@rind-ui/theme/builder` turns brand inputs into validated theme CSS. It is pure TypeScript with no DOM and no dependency, so it runs in a build script, a server request or a browser. The same input always gives the same bytes.
- [Token reference](https://rind.watermelon-studio.it/theme/tokens.md): Every tier 2 (semantic) token and every component's tier 3 token. Tier 1 are the twelve `--rind-brand-*` inputs; see [white-label.md](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/theme/white-label.md).

## Components

- [Accordion](https://rind.watermelon-studio.it/docs/accordion.md): A set of headers, each toggling one panel. Every item is a [Collapsible](collapsible.md), so closed panels stay findable by the browser's search (`closedContent="until-found"`, the default).
- [Alert](https://rind.watermelon-studio.it/docs/alert.md): An inline message in the page layout ("Couldn't save", "Connection lost", "Maintenance tonight"). It never takes focus and is never a live region of its own: it announces through rind-ui's Announcer, once when it appears after the page has loaded and once each time its text changes while shown. A dismissal keeps focus on the page, never on `body`.
- [Aspect Ratio](https://rind.watermelon-studio.it/docs/aspect-ratio.md): There is no `AspectRatio` component to import: put the native CSS `aspect-ratio` property on the element itself (`<div style={{ aspectRatio: "16 / 9" }}>`), with no wrapper. This page is the recipe that replaces an `AspectRatio` component.
- [Avatar](https://rind.watermelon-studio.it/docs/avatar.md): A person or an entity shown as an image, with a fallback (initials, an icon) while the image is missing, loading or broken. The avatar has one accessible name in every status, and the rendered `<img>` is the only thing that loads the image.
- [Badge](https://rind.watermelon-studio.it/docs/badge.md): A small piece of static status text: a count, a label, a dot. It is never interactive and never a live region; its meaning reaches assistive technology through the control it sits on.
- [Breadcrumbs](https://rind.watermelon-studio.it/docs/breadcrumbs.md): A navigation landmark with the trail of links to the ancestors of the current location. The current item is explicit, separators are hidden glyphs, and long trails can collapse their middle items into a menu you render.
- [Button](https://rind.watermelon-studio.it/docs/button.md): A button that reports each activation once, from every input (mouse, touch, Enter, Space, a screen reader's click), with its modality; a pending state that keeps focus and announces itself; and the same behaviour whatever element it renders.
- [Calendar](https://rind.watermelon-studio.it/docs/calendar.md): Use a Calendar when the user has to see a month (or several) and pick one or more days from it: choosing a day in a schedule, a booking window shown as a grid, the days off in a rota, or the visible part of a date picker. It is a grid of dates with a focused date, paging between months, and a selection.
- [Checkbox Group](https://rind.watermelon-studio.it/docs/checkbox-group.md): A checkbox, alone or in a set. Inside `CheckboxGroup.Root`, the items share one array value, with an optional select-all `Parent`. Outside any Root, a lone `CheckboxGroup.Item` is the single checkbox: a checked, unchecked or mixed (`indeterminate`) choice with its own value. The Root is a `role="group"` named by its Label (a native `<fieldset>`/`<legend>` through `render` needs no role); each item is a real `<button role="checkbox">` with its own hidden native `<input type="checkbox">` that carries the value, validation and reset ([hidden-form-input](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/guides/hidden-form-input.md)).
- [Clipboard](https://rind.watermelon-studio.it/docs/clipboard.md): Copies a value to the clipboard: a copy button, or a read-only field with a copy button at its end. The result comes from the write itself, never before it: `copying` while the browser's clipboard has not answered, then `copied` or `error`, announced politely ("Copied", "Copy failed") and shown by the Indicator. The write goes through the environment's clipboard (the Clipboard API, then a `execCommand` fallback next to the Trigger), so tests run it with `fakeClipboard`.
- [Code Block](https://rind.watermelon-studio.it/docs/code-block.md): Source code shown as text: readable in the server HTML without JavaScript, with a copy button whose result is announced, line numbers that are never copied, highlighted lines that do not depend on colour, soft wrap, and a collapsed preview for long blocks. It highlights ts/tsx/js/jsx, css, html, json and bash itself, with no dependency; the colours are yours to pick through CSS custom properties.
- [Collapsible](https://rind.watermelon-studio.it/docs/collapsible.md): A trigger that shows and hides one region. Closed content stays findable by the browser's search (`closedContent="until-found"`, the default), or is hidden, or is removed.
- [Color Picker](https://rind.watermelon-studio.it/docs/color-picker.md): A colour picker: a trigger and a popover, or an inline panel, holding the parts you choose (a colour area, channel sliders, hex and channel inputs, swatches, an eye dropper, a format switch), all bound to one colour. It is one component: the parts compose any picker, from a full panel to a single hex field or a row of swatches. The picker owns the colour, the display format and the open state.
- [Combobox](https://rind.watermelon-studio.it/docs/combobox.md): A text input with a popup list of options: the user types to narrow the list, moves through it with the arrow keys and picks one. It covers the select-with-search case (the value is one of the options), the free-text case (`allowCustomValue`), inline completion, grouped and disabled options, and lists filtered by a server. The input keeps focus the whole time; the highlighted option is announced through `aria-activedescendant`. The option parts are the Listbox parts, so keys, attributes and selection match a Listbox.
- [Context Menu](https://rind.watermelon-studio.it/docs/context-menu.md): A Menu opened from a region of the page instead of a button: a right click, a long press on touch, or the context-menu key on the keyboard opens `role="menu"` at the point of the gesture. It is modal by default (the page behind is inert); `modal={false}` leaves it usable. Items, groups, checkbox and radio items, links and submenus are the Menu's own parts.
- [Date Field](https://rind.watermelon-studio.it/docs/date-field.md): A date, a date and time, or a time of day, typed segment by segment: month, day, year, hour, minute and the rest, in the order and with the digits of the user's locale. Each segment is a native input with the `spinbutton` role, so the keyboard steps it, a screen reader names it, and the whole group submits a real date through a hidden native input. The Root is a Field, so labelling, description and validation work like any Field.
- [Dialog](https://rind.watermelon-studio.it/docs/dialog.md): A window layered over the page. It is modal by default: everything outside is inert, the page does not scroll and Tab stays inside. Focus moves in on open and returns to the opener on close. The content is `role="dialog"`, named by its title.
- [Drawer](https://rind.watermelon-studio.it/docs/drawer.md): A panel docked to an edge of the screen that slides in over the page and can be dragged away. It is a Dialog with a side, a swipe gesture and optional snap points: modal by default, everything outside is inert, the page does not scroll and Tab stays inside. Focus moves in on open and returns to the opener on close. The content is `role="dialog"`, named by its title.
- [Field](https://rind.watermelon-studio.it/docs/field.md): Gives one form control a label, a description and an error message, carries `disabled`, `readOnly`, `required` and `invalid` to it, validates it, and exposes the result as data attributes, ARIA and a driver.
- [Fieldset](https://rind.watermelon-studio.it/docs/fieldset.md): A native `<fieldset>` that names and describes a group of related controls, shows a group-level error, and disables every control inside it, native and rind-ui alike, portalled parts included.
- [File Upload](https://rind.watermelon-studio.it/docs/file-upload.md): Takes files from the native chooser, a drop or a paste, checks them, and holds the list. The value is that list: every gesture goes through one validation, `onFilesChange` receives the whole new list, and the hidden native `<input type="file">` always holds exactly those files, so a plain form submits them. The one keyboard way in is a real Trigger button; the Dropzone is a pointer convenience with no role and no tab stop.
- [Form](https://rind.watermelon-studio.it/docs/form.md): A native `<form>` that validates every Field it contains on a submit attempt, focuses the first invalid one, holds a submission for pending async checks, maps server errors to Fields by name, announces a failed attempt once, and resets with rules that survive React form actions.
- [Grid List](https://rind.watermelon-studio.it/docs/grid-list.md): A list of rows that each can hold their own interactive content: a selection checkbox, buttons, a text field, a link, even a nested Tag Group. Users move between rows with the arrow keys from one Tab stop, reach a row's controls with ArrowRight (or Tab), select rows, and run a row's action with Enter or a press.
- [Heading](https://rind.watermelon-studio.it/docs/heading.md): A heading whose level comes from where it is: sections nest, and each `Heading` renders the native `h1`–`h6` for its depth, so the document outline stays right without counting levels by hand.
- [Hover Card](https://rind.watermelon-studio.it/docs/hover-card.md): A preview of a link's destination, shown when the pointer rests on the link or when keyboard focus stays on it. The content is a non-modal `role="dialog"` positioned against the link by the shared positioning capability. The trigger is a real link: it keeps its role and `href`, and activating it follows the link.
- [Image Cropper](https://rind.watermelon-studio.it/docs/image-cropper.md): Choose the part of an image to keep: a crop area over the image that you move and resize, with zoom, any-angle rotation and flip, and the result in the image's own pixels. It does everything the reference croppers do (the crop in the viewport with the image moving under it, a fixed crop area, wheel and pinch zoom, nudge steps), with three fixes: the image always covers the crop exactly (no empty corners under rotation), the crop area stays reachable by keyboard with a fixed area, and the rectangle is announced after keyboard changes instead of a live region re-reading the cropper.
- [Image Viewer](https://rind.watermelon-studio.it/docs/image-viewer.md): An image you zoom and pan in place: a floor plan, a product photo, a scan. Ctrl-scroll and trackpad pinch (Safari's too), touch pinch and double click zoom about the pointer; drag moves the image; the keyboard and the buttons reach everything the pointer does. The image never leaves the view, a plain wheel keeps scrolling the page, and the zoom level is announced once after keyboard and button changes.
- [Image](https://rind.watermelon-studio.it/docs/image.md): A content image with a fallback for while it is missing, loading or broken. It keeps one accessible name, its `alt`, in every status, makes `alt` a decision you cannot skip, and leaves every native image feature (lazy loading, `srcSet`, framework image components such as `next/image`, see below) to the one `<img>` it renders.
- [Kbd](https://rind.watermelon-studio.it/docs/kbd.md): A keyboard shortcut, shown the way the user's platform writes it and said right to a screen reader. `keys="mod+shift+p"` renders ⌘⇧P on Apple and Ctrl+Shift+P elsewhere; every glyph is hidden from assistive technology next to its spoken name, so it reads "Command plus Shift plus P", never "place of interest sign". The same keys give the control its `aria-keyshortcuts`.
- [Label](https://rind.watermelon-studio.it/docs/label.md): A native `<label>` that names a control through `for` or by wrapping it, and fixes what native labels get wrong: no text selection on double click, focus forwarding for controls a label cannot name, and a development check of what `for` points at.
- [Link](https://rind.watermelon-studio.it/docs/link.md): A navigational link that behaves like a native `<a href>` wherever it appears: client routing without double navigation, modifier clicks left to the browser, disabled and current states, and a driver to test it.
- [Listbox](https://rind.watermelon-studio.it/docs/listbox.md): A list of options the user moves through with the keyboard and picks from: single or multiple selection, or an action list with no selection at all. Options can be grouped in sections, carry a description and an indicator, load more as the user scrolls, and be virtualized. The list is one tab stop and the options move by roving focus. The same parts power other composite components (see [Reusing the listbox parts](#reusing-the-listbox-parts)).
- [Marquee](https://rind.watermelon-studio.it/docs/marquee.md): A band of content that scrolls by on a loop: logos, a ticker, a row of testimonials. The motion is CSS (each copy translates by its own size), so pausing holds the band where it is and resuming continues from there. The script only measures, keeps the motion continuous when its timing changes, and seeks so a focused link is in view. It follows WCAG 2.2.2: a PauseTrigger stops it, hovering pauses it, keyboard focus pauses it until the user plays it again, and reduced motion shows the content once, wrapped and still.
- [Menu](https://rind.watermelon-studio.it/docs/menu.md): A list of actions opened from a trigger button: `role="menu"` with items, checkbox and radio items, groups, links and nested submenus. It is modal by default (the page behind is inert); `modal={false}` leaves it usable. The content is positioned against the trigger by the shared positioning capability and named by the trigger.
- [Menubar](https://rind.watermelon-studio.it/docs/menubar.md): A persistent, named row (or column) of menu items, each opening a [Menu](menu.md). The bar is one tab stop with arrow keys and typeahead; once a menu is open, hovering or arrowing to another item switches menus without a second click. Inside a menu everything is the Menu's: its parts, keys and close rules.
- [Message Thread](https://rind.watermelon-studio.it/docs/message-thread.md): The scrolling conversation around the messages. While you are at the bottom it follows the newest content (a streaming answer included); the moment you scroll back to read, it lets go, and counts what arrives on a "jump to latest" button. It is an APG Feed: each message is an article named by its speaker, Page Down / Page Up move between them, and the thread is never a live region (each [Streaming Message](streaming-message.md) announces its own start and end).
- [Meter](https://rind.watermelon-studio.it/docs/meter.md): Shows a measurement within a known range: storage used, battery level, password strength. It is `role="meter"` (exactly, with no fallback role) named by its Label, with the value in `aria-valuenow` and the same formatted text in `aria-valuetext` and the visible ValueText. Optional `low`, `high` and `optimum` split the range into regions the way HTML `<meter>` does.
- [Navigation Menu](https://rind.watermelon-studio.it/docs/navigation-menu.md): Site navigation: a named `nav` landmark with top-level links and disclosure buttons whose panels hold more links. Panels open on press, on Enter or Space, and when a mouse or pen rests on their trigger; one panel per level is open at a time, and an optional shared viewport animates between them.
- [Number Input](https://rind.watermelon-studio.it/docs/number-input.md): A text field for numbers with an optional stepper on each side. It formats and parses in the user's locale (decimal, percent, currency, unit; Latin, Arabic, Persian, Devanagari and full-width digits), steps by keyboard, buttons, press-and-hold and wheel, and submits a real number through a hidden native `<input type="number">`. The Root is a Field, so labelling, description and validation work like any Field.
- [Pagination](https://rind.watermelon-studio.it/docs/pagination.md): Navigation between the pages of a long list: a `nav` landmark with the page controls, Previous and Next, and optionally First and Last. The controls are buttons, or links when each page has a URL.
- [Pin Input](https://rind.watermelon-studio.it/docs/pin-input.md): A fixed-length code (verification code, PIN) entered in **one native text input** drawn over presentational slots. Typing, paste, SMS and password-manager autofill, IME and screen readers all work as they do for one ordinary field. The Root is a Field, so labelling, description and validation work like any Field.
- [Popover](https://rind.watermelon-studio.it/docs/popover.md): A floating panel anchored to a trigger. It is non-modal by default: the page stays usable, a press or focus outside closes it, and Tab continues from the trigger into the content. The content is `role="dialog"`, positioned against the trigger (or an `Anchor`) by the shared positioning capability.
- [Progress](https://rind.watermelon-studio.it/docs/progress.md): Shows how far a task has advanced, as a bar or a ring, determinate or indeterminate. It is `role="progressbar"` named by its Label, with the value in `aria-valuenow` and the same formatted text in `aria-valuetext` and the visible ValueText. It is never a live region; it can announce completion once.
- [Prompt Input](https://rind.watermelon-studio.it/docs/prompt-input.md): The box where a user writes a prompt for an assistant: a draft that grows with its text, files attached by picker, paste or drop, and one button that sends the prompt or, while the reply is on its way, stops it. There is no model inside: you send the request in `onSubmit` and report its progress with `status`; the component owns the keys, the draft, the attachments, the send/stop lifecycle and what screen readers hear.
- [QR Code](https://rind.watermelon-studio.it/docs/qr-code.md): A value rendered as a scannable QR Code symbol: a named image whose description is the value, an optional logo, and a download trigger. Encoding is done by rind-ui's own encoder, with no dependency; the symbol is identical on the server and in the browser.
- [Radio Group](https://rind.watermelon-studio.it/docs/radio-group.md): One choice out of several. The Root is a `role="radiogroup"` named by its Label; each Item has a real `<button role="radio">` control and a hidden native `<input type="radio">` that carries the value, validation and reset ([hidden-form-input](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/guides/hidden-form-input.md)). Arrow keys move focus **and** check, as the native radio group does.
- [Rating](https://rind.watermelon-studio.it/docs/rating.md): A row of stars to give a score from 1 to `count`, optionally in half stars. The one focusable element is a visually hidden native `<input type="range">` (role `slider`), so screen readers announce "3 of 5 stars" and touch screen readers adjust it with a swipe. The stars are decoration (`aria-hidden`), drawn from each Item's `data-state`. A hidden input carries the form value, `required` and reset ([hidden-form-input](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/guides/hidden-form-input.md)).
- [Reasoning](https://rind.watermelon-studio.it/docs/reasoning.md): A model's chain of thought beside its answer: a disclosure that opens by itself while the model thinks ("Thinking…"), closes a second after it answers ("Thought for 12 seconds"), and keeps the trace for whoever wants to read it. The lifecycle only reacts to live thinking: a reloaded message never opens or closes by itself, the user's toggle wins for good, and the automatic close never hides focus.
- [Scroll Area](https://rind.watermelon-studio.it/docs/scroll-area.md): A native scroll container whose scrollbars are drawn by you. The browser keeps doing all the scrolling: wheel, touch, momentum, keyboard, zoom, find-in-page, right-to-left and forced colors work as in any `overflow: auto` element. The component hides the native bars, measures, and draws a thumb you can drag.
- [Segmented Control](https://rind.watermelon-studio.it/docs/segmented-control.md): One choice out of a joined strip of segments. It is a radio group under its own scope: the root is a `role="radiogroup"`, each segment a real `<button role="radio">` with an explicit `aria-checked`, and one hidden `<input type="radio">` per segment submits the value with a form. The value is the selected segment's key (`string | null`).
- [Select](https://rind.watermelon-studio.it/docs/select.md): A button that opens a list of options and shows the chosen one. Single or multiple selection, sections, descriptions, typeahead on the closed trigger, and form submission. The trigger is a `combobox` named by the label; the popup is a `listbox` built from the same parts as the [Listbox](listbox.md), positioned against the trigger and modal by default (the page behind is inert and does not scroll).
- [Separator](https://rind.watermelon-studio.it/docs/separator.md): A static divider between groups of content or controls. It is never focusable and has no state; the same rules decide the role and orientation of every divider in rind-ui (Toolbar, Menu, the listbox popups).
- [Skeleton](https://rind.watermelon-studio.it/docs/skeleton.md): Placeholder shapes for content that is still loading. The loading state is exposed once for the whole area: the region is busy, the placeholders are hidden from assistive technology and unreachable by Tab, a visually hidden "Loading" text sits outside the region, and the shimmer stops for users who prefer reduced motion.
- [Slider](https://rind.watermelon-studio.it/docs/slider.md): Selects one value, or several (a range), on a continuous axis (APG Slider and Multi-Thumb Slider). Every thumb is backed by a real `<input type="range">`, the only focusable element of the thumb: browsers, screen readers and forms treat it as a native slider ([hidden-form-input](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/guides/hidden-form-input.md)).
- [Sortable](https://rind.watermelon-studio.it/docs/sortable.md): Reorder a list by dragging, by keyboard or by buttons: tasks, tracks, fields, cards, columns. Each item has a handle, a button named for its item ("Reorder Apple"). Space picks the item up, the arrows move it one position at a time (the list reorders live and focus stays on the handle), Space drops it and Escape puts it back. Alt+arrow moves an item one place without picking it up, and move buttons do the same with a single click. A pointer drag shows where the item will land. Every step is announced with the item's position ("Apple dropped at position 3 of 5").
- [Splitter](https://rind.watermelon-studio.it/docs/splitter.md): Resizable panels on one axis, with a focusable handle between each pair (APG Window Splitter). Sizes are percentages of the panels' space and are known before hydration: the server renders the final layout, so nothing shifts when the page becomes interactive.
- [Stepper](https://rind.watermelon-studio.it/docs/stepper.md): A sequence of steps (checkout, onboarding, a long form) with where you are, what is done, and how to move. It is an ordered list with `aria-current="step"`, never tabs; a step you can go to is a button, the others plain text, and each step's name ends with its status ("Shipping (completed)"). Moving by the user focuses the new step's content and announces "Step 2 of 4: Shipping"; in a linear flow you go back freely and forward only with Next, which your validation can refuse.
- [Streaming Message](https://rind.watermelon-studio.it/docs/streaming-message.md): One AI response that arrives in chunks. You pass the `text` received so far and the `status` from your chat runtime; the component paces bursty chunks so they read evenly, marks the text busy while it grows, draws a caret, and announces the start and the end of the response, never a chunk. Rendering the text (plain, markdown) stays yours: `Content` hands your renderer the displayed text.
- [Switch](https://rind.watermelon-studio.it/docs/switch.md): An on/off setting that takes effect immediately (APG Switch). The Control is a real `<button role="switch">`; a hidden native `<input type="checkbox">` carries the value, validation and reset ([hidden-form-input](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/guides/hidden-form-input.md)).
- [Table of Contents](https://rind.watermelon-studio.it/docs/table-of-contents.md): "On this page": the list of a document's sections, with the one being read marked as you scroll and links that take you to a section. It is a navigation landmark of real anchor links; exactly one carries `aria-current="location"`, chosen by a reading line a third of the way down the scroll root, and the last section still becomes current at the bottom of the page. A followed link is current at once and stays so while the page scrolls to it, and keyboard and screen-reader users land on the heading itself.
- [Table](https://rind.watermelon-studio.it/docs/table.md): A native `<table>` for data people read: API references, plan comparisons, lists of records. It adds what tables usually miss — a scroll container that keyboard users can reach when it overflows, sorting that every screen reader hears, and server rendering of every row — without adding any ARIA role or event handler to the table itself, so screen-reader table navigation and text selection stay native.
- [Tabs](https://rind.watermelon-studio.it/docs/tabs.md): A tab list with one roving tab stop and one panel per tab. Tabs are real `<button role="tab">` elements with an always explicit `aria-selected`; panels are `role="tabpanel"` labelled by their tab. The value is the selected tab's key (`string | null`).
- [Tag Group](https://rind.watermelon-studio.it/docs/tag-group.md): A collection of tags (labels, keywords, filters, recipients) that users browse with one Tab stop and, depending on what you pass, select, act on, follow as links, or remove. Removing a tag moves focus to its neighbour and is announced; the group never leaves focus on the page body.
- [Tags Input](https://rind.watermelon-studio.it/docs/tags-input.md): A text input that turns what the user types into a list of tags (chips). Enter or a delimiter creates a tag, a paste of a list creates several, Backspace and the remove buttons delete them, and a tag can be edited in place. The value is a `string[]`. The input keeps DOM focus while the user types; the chips are a toolbar the user moves through with the arrow keys. With `items` it also suggests tags from a list (see Suggestions).
- [Text Field](https://rind.watermelon-studio.it/docs/text-field.md): A native `<input>` or `<textarea>` with a controllable value, correct IME handling, a clear button, a character count and autosize, labelled, described and validated like any Field. `type="password"` adds a visibility toggle every input method can operate; `type="search"` adds search semantics, Escape to clear and Enter to search.
- [Timeline](https://rind.watermelon-studio.it/docs/timeline.md): An ordered list of events: an order's progress, an activity feed, a release log, a pipeline. It is an `<ol>` in reading order, whatever the layout (alternating sides, horizontal). On a progress timeline each event's title ends with its status for screen readers ("Shipped (completed)") and the current event has `aria-current="step"`, so progress is never colour alone; dates are `<time datetime>`.
- [Toast](https://rind.watermelon-studio.it/docs/toast.md): A short message that appears over the page without taking focus, then goes away by itself: "Saved", "Message sent", "Item archived. Undo".
- [Toggle Group](https://rind.watermelon-studio.it/docs/toggle-group.md): A toggle button, alone or in a set. Inside `ToggleGroup.Root`, the items share one roving tab stop and one value. Outside any Root, a lone `ToggleGroup.Item` is the single toggle: a two-state button that says whether it is on with `aria-pressed`, with its own `pressed` state. Each Item is a real `<button aria-pressed>`; the group is a `role="group"` named by you. `selectionMode` is `single` (pressing an item replaces the selection, the default) or `multiple`. The value is always a `string[]`.
- [Toolbar](https://rind.watermelon-studio.it/docs/toolbar.md): A row (or column) of controls with one roving tab stop. Tab enters the toolbar on the last control that had focus, arrows move between controls, Tab leaves. The root is `role="toolbar"` named by you; its controls keep their own roles: buttons, links, the items of a hosted [Toggle Group](toggle-group.md) or [Radio Group](radio-group.md), and any other control through `Toolbar.Item`.
- [Tooltip](https://rind.watermelon-studio.it/docs/tooltip.md): A short text shown when the pointer rests on a trigger or the trigger receives keyboard focus. It supplements the trigger; it is not a place for anything interactive. The content is `role="tooltip"`, never focusable, positioned against the trigger by the shared positioning capability.
- [Tour](https://rind.watermelon-studio.it/docs/tour.md): A guided tour over the page: an ordered list of steps, each a card that points at a real element (dimming the rest of the page around it) or sits centred as a plain dialog. The page stays usable behind an anchored step; steps can wait for late targets, run effects before they show, and wait for the user to do something.
- [Tree View](https://rind.watermelon-studio.it/docs/tree-view.md): A hierarchy of nodes the user expands, collapses and moves through with the keyboard, then selects, checks or activates: a file explorer, an outline, a category filter, a documentation sidebar. Branches can load their children the first time they open. The tree is one tab stop, its rows move by roving focus, and every row is a sibling in the DOM (a flat list), so long trees stay cheap to render.

## Accessibility

- [Support matrix](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/accessibility/support-matrix.md): which screen reader and browser combinations are supported, and how each is tested.
- [Quirks](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/accessibility/quirks.md): every browser and assistive-technology workaround, with its bug links.

## Optional

- [Full documentation](https://rind.watermelon-studio.it/llms-full.txt): every page above in one file.
- [MCP server](https://www.npmjs.com/package/@rind-ui/mcp): `npx -y @rind-ui/mcp` lists rind-ui's components and reads their docs for an agent.
- [Agent skill](https://github.com/WatermelonBros/rind-ui/tree/main/skills/rind-ui): how to compose rind-ui and verify it with the drivers, in the Agent Skills format.
- [rind-ui compared](https://rind.watermelon-studio.it/compare.md): how rind-ui differs from other headless libraries, where they are ahead, and when to pick them instead.