{"slug":"list","name":"List","packageName":"@liquidify/react","category":"controls","maturity":"experimental","summary":"An inset grouped list for navigation, settings, and single selection.","importPath":"@liquidify/react/list","sourcePath":"packages/@liquidify/react/src/components/list/list.tsx","specPath":"packages/@liquidify/react/src/components/list/spec.md","docsPath":"../liquidify-page/content/component-source/list.md","documentationStatus":"beta","storyIds":["controls-list--default"],"additionalExports":["ListActionItemProps","ListItemProps","ListNavigationItemProps","ListSectionProps","ListSelectionItemProps","ListStaticItemProps"],"anatomy":[],"props":[{"name":"children","type":"ReactNode","required":true,"description":"Sections in display order. children role: `items`.","declaredIn":"packages/@liquidify/react/src/components/list/list.tsx"},{"name":"className","type":"string | undefined","required":false,"description":"Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"defaultValue","type":"string | null | undefined","required":false,"description":"Initial uncontrolled selection, read only on mount.","declaredIn":"packages/@liquidify/react/src/components/list/list.tsx"},{"name":"id","type":"string | undefined","required":false,"description":"","declaredIn":"packages/@liquidify/react/src/components/list/list.tsx"},{"name":"onChange","type":"((value: string) => void) | undefined","required":false,"description":"Called once when an enabled option changes the selection.","declaredIn":"packages/@liquidify/react/src/components/list/list.tsx"},{"name":"ref","type":"Ref<HTMLDivElement> | undefined","required":false,"description":"Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"selectionMode","type":"\"none\" | \"single\" | undefined","required":false,"description":"Group navigation, action, or static rows without selection state. Enable native radio selection across all sections.","declaredIn":"packages/@liquidify/react/src/components/list/list.tsx"},{"name":"value","type":"string | null | undefined","required":false,"description":"Controlled selection. `null` means nothing is selected.","declaredIn":"packages/@liquidify/react/src/components/list/list.tsx"}],"swiftUIMap":[{"swiftUI":"List","react":"List","notes":"Inset grouped presentation","relationship":"direct"},{"swiftUI":"Section","react":"List.Section","notes":"Liquidify compound API","relationship":"direct"},{"swiftUI":"List(selection:)","react":"selectionMode=\"single\", value, defaultValue, onChange","notes":"Native radio selection on the web","relationship":"direct"},{"swiftUI":"NavigationLink","react":"List.Item href or onPress with disclosure","notes":"Web convention; the host owns routing","relationship":"renamed"},{"swiftUI":"LabeledContent","react":"List.Item label and detail","notes":"Label/value layout within a row","relationship":"direct"}],"tokens":["--lq-color-accent","--lq-color-bg-secondary","--lq-color-label-primary-dark","--lq-color-label-primary-light","--lq-color-label-secondary-dark","--lq-color-label-secondary-light","--lq-color-label-tertiary-dark","--lq-color-label-tertiary-light","--lq-color-system-gray-5-default-dark","--lq-radius-14","--lq-space-1","--lq-space-12","--lq-space-16","--lq-space-2","--lq-space-24","--lq-space-48"],"keyboard":[{"key":"Keyboard","action":"Tab / Shift+Tab moves among links, buttons, and native radio groups; Enter activates links and buttons; Space activates buttons and radios; arrow keys select adjacent enabled radio options."}],"variants":[],"variantPages":[]}