Components

Component

List

Structured rows for settings, menus, and selection surfaces.

ReactReact Native6 props
PreviewReact
Workspace3 items
Design systemStatic row with prefix and status metadata

Ready

Archived projectDisabled row keeps layout and contrast predictableLocked

Imports

import { List, ListHeader, ListItem, ListButtonItem, ListCheckItem, ListRadioItem, ListDivider } from "@hozorica/hods-react/list";
import { List, ListHeader, ListItem, ListButtonItem, ListCheckItem, ListRadioItem, ListDivider } from "@hozorica/hods-react-native/list";

Props

PropTypeDescription
title / detail *ReactNodePrimary and secondary row text.
prefix / suffixReactNodeLeading and trailing row slots.
disabledbooleanReduces emphasis and disables interactive rows.
checked / defaultCheckedbooleanListCheckItem and ListRadioItem selection state.
onCheckedChange(checked) => voidListCheckItem selection callback.
itemBorderRadiusstring | numberContainer corner radius override.

Platform Support

React

Bordered list container with static, button, checkbox, radio, header, and divider helpers.

React Native

View and Pressable list rows with matching row content slots.

Usage

<List><ListHeader>Account</ListHeader><ListButtonItem title="Profile" suffix="›" /></List>

Notes

  • Use ListButtonItem for navigational rows.
  • Use SelectBox when each option needs stronger card emphasis.