Connection settings
- Device namePixel
The row changes the network. Its separate switch turns the connection on or off.
Android list
Segmented Material list rows with leading content, supporting text and independent trailing controls.
Preview
- Wi-FiConnected to Studio
- NetworkStudio
In action
When to use
Use it for
- Grouped Android settings and one-, two- or three-line content rows.
- A row action beside an independent trailing switch.
Not for
- Tabular data where users compare aligned columns.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { AndroidList, AndroidListRow, AndroidSwitch } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/android-list.
2. Vendor the source
npx @noorddev/vlak-cli add android-list
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/android-list.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { AndroidList, AndroidListRow, AndroidSwitch } from "@noorddev/vlak-react";
<AndroidList aria-label="Connections">
<AndroidListRow headline="Wi-Fi" supportingText="Studio network" onAction={openNetworks} trailing={<AndroidSwitch aria-label="Wi-Fi enabled" defaultChecked />} />
<AndroidListRow headline="Device name" supportingText="Pixel" />
</AndroidList>Props
AndroidList
Also accepts HTMLAttributes<HTMLUListElement>.
AndroidListRow
| Prop | Type | Default | Description |
|---|---|---|---|
headlinerequired | ReactNode | ||
supportingText | ReactNode | ||
overline | ReactNode | ||
leading | ReactNode | ||
trailing | ReactNode | ||
onAction | MouseEventHandler<HTMLButtonElement> | ||
disabled | boolean | ||
actionProps | Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className" | "style" | "onClick" | "disabled"> | Native attributes for the row's optional button. Trailing controls remain siblings. |
Also accepts Omit<LiHTMLAttributes<HTMLLIElement>, "children">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves between row actions and independent trailing controls. |
| Enter or Space | Activates a focused row button. |
Accessibility
- Native ul and li preserve list structure.
- Only rows with onAction become buttons; static rows add no tab stop.
- Trailing controls are siblings of the row button, so interactive elements are never nested.
- Decorative leading content is hidden from assistive technology.
Markup
<ul class="rs-android-list" aria-label="Connections"><li class="rs-android-list-row"><button class="rs-android-list-body rs-android-list-action rs-android-list-two-line" type="button"><span class="rs-android-list-copy"><span class="rs-android-list-headline">Wi-Fi</span><span class="rs-android-list-secondary">Studio network</span></span></button><span class="rs-android-list-trailing">Connected</span></li><li class="rs-android-list-row"><div class="rs-android-list-body"><span class="rs-android-list-copy"><span class="rs-android-list-headline">Device name</span></span></div><span class="rs-android-list-trailing">Pixel</span></li></ul>
Classes
.rs-android-list.rs-android-list-row.rs-android-list-body.rs-android-list-action.rs-android-list-two-line.rs-android-list-three-line.rs-android-list-leading.rs-android-list-copy.rs-android-list-headline.rs-android-list-secondary.rs-android-list-trailing