# List A list is a component used to organize and display a continuous collection of related items in a structured, scannable format **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-list--introduction ## Variants documented in Storybook - ListSizes: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-list--listsizes - ValidationStates: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-list--validationstates - SelectionPatterns: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-list--selectionpatterns - SwitchPatterns: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-list--switchpatterns ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for List. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

List

A list is a component used to organize and display a continuous collection of related items in a structured, scannable format

Implementation Showcase

1. List Size

Small & Medium

Large & XL Large

2. Validation

Warning Showcase

3. Selection Pattern

Checkbox

Radio

Checkmarks

Without Checkmarks

4. Switch

  • Whole row toggle
  • Switch-only control

Important CSS Classes

Quick reference for essential layout and state classes.

Layout Classes

Class Usage
ux4g-list Main list container
ux4g-list-item Wrapper for a single list row
ux4g-list-item-row Interactive row content
ux4g-list-item-start Leading content slot
ux4g-list-item-end Trailing content slot

State & Size Classes

Class Usage
ux4g-list-s/m/l/xl Size variants
ux4g-list-error Error validation state
ux4g-list-success Success validation state
ux4g-list-warning Warning validation state
active Selection highlight state
``` React: ```jsx import React from 'react'; const ListExample1Demo = () => ( <>
Components

List

A list is a component used to organize and display a continuous collection of related items in a structured, scannable format

Implementation Showcase

{/* 1. List Size */}

1. List Size

Small & Medium

Large & XL Large

{/* 2. Validation */}

2. Validation

Warning Showcase

{/* 3. Selection Pattern */}

3. Selection Pattern

Checkbox

Radio

Checkmarks

Without Checkmarks

{/* 4. Switch */}

4. Switch

  • Whole row toggle
  • Switch-only control
{/* IMPORTANT CSS */}

Important CSS Classes

Quick reference for essential layout and state classes.

Layout Classes

Class Usage
ux4g-list Main list container
ux4g-list-item Wrapper for a single list row
ux4g-list-item-row Interactive row content
ux4g-list-item-start Leading content slot
ux4g-list-item-end Trailing content slot

State & Size Classes

Class Usage
ux4g-list-s/m/l/xl Size variants
ux4g-list-error Error validation state
ux4g-list-success Success validation state
ux4g-list-warning Warning validation state
active Selection highlight state
); export default ListExample1Demo; ``` Angular: ```html
Components

List

A list is a component used to organize and display a continuous collection of related items in a structured, scannable format

Implementation Showcase

1. List Size

Small & Medium

Large & XL Large

2. Validation

Warning Showcase

3. Selection Pattern

Checkbox

Radio

Checkmarks

Without Checkmarks

4. Switch

  • Whole row toggle
  • Switch-only control

Important CSS Classes

Quick reference for essential layout and state classes.

Layout Classes

Class Usage
ux4g-list Main list container
ux4g-list-item Wrapper for a single list row
ux4g-list-item-row Interactive row content
ux4g-list-item-start Leading content slot
ux4g-list-item-end Trailing content slot

State & Size Classes

Class Usage
ux4g-list-s/m/l/xl Size variants
ux4g-list-error Error validation state
ux4g-list-success Success validation state
ux4g-list-warning Warning validation state
active Selection highlight state
``` ### 2. List Sizes — List Small HTML: ```html
    • ``` React: ```jsx import React from 'react'; const ListExample2Demo = () => ( <> {/* Variant: List Small - Example 1 */}
    • {/* Variant: List Small - Example 2 */}
    • ); export default ListExample2Demo; ``` Angular: ```html
    • ``` ### 3. List Sizes — List Medium HTML: ```html
    • ``` React: ```jsx import React from 'react'; const ListExample3Demo = () => ( <> {/* Variant: List Medium - Example 1 */}
    • {/* Variant: List Medium - Example 2 */}
    • ); export default ListExample3Demo; ``` Angular: ```html
    • ``` ### 4. List Sizes — List Large HTML: ```html
    • ``` React: ```jsx import React from 'react'; const ListExample4Demo = () => ( <> {/* Variant: List Large - Example 1 */}
    • {/* Variant: List Large - Example 2 */}
    • ); export default ListExample4Demo; ``` Angular: ```html
    • ``` ### 5. List Sizes — List XL Large HTML: ```html
    • ``` React: ```jsx import React from 'react'; const ListExample5Demo = () => ( <> {/* Variant: List XL - Example 1 */}
    • {/* Variant: List XL - Example 2 */}
    • ); export default ListExample5Demo; ``` Angular: ```html
    • ``` ### 6. Selection Patterns — Selection checkbox HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample6Demo = () => ( <> ); export default ListExample6Demo; ``` Angular: ```html ``` ### 7. Selection Patterns — Selection Trailing Checkmarks HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample7Demo = () => ( <> ); export default ListExample7Demo; ``` Angular: ```html ``` ### 8. Selection Patterns — Selection No Trailing Checkmarks HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample8Demo = () => ( <> ); export default ListExample8Demo; ``` Angular: ```html ``` ### 9. Selection Patterns — Selection With Supporting Text HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample9Demo = () => ( <> ); export default ListExample9Demo; ``` Angular: ```html ``` ### 10. Selection Patterns — Selection Radio Buttons HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample10Demo = () => ( <> ); export default ListExample10Demo; ``` Angular: ```html ``` ### 11. Selection Patterns — Selection checkbox HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample11Demo = () => ( <> ); export default ListExample11Demo; ``` Angular: ```html ``` ### 12. Selection Patterns — Selection Trailing Checkmarks HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample12Demo = () => ( <> ); export default ListExample12Demo; ``` Angular: ```html ``` ### 13. Selection Patterns — Selection No Trailing Checkmarks HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample13Demo = () => ( <> ); export default ListExample13Demo; ``` Angular: ```html ``` ### 14. Selection Patterns — Selection With Supporting Text HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample14Demo = () => ( <> ); export default ListExample14Demo; ``` Angular: ```html ``` ### 15. Switch Patterns — Default (whole list item toggles switch) HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample15Demo = () => ( <> ); export default ListExample15Demo; ``` Angular: ```html ``` ### 16. Switch Patterns — Only switch toggles (list item not clickable) HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample16Demo = () => ( <> ); export default ListExample16Demo; ``` Angular: ```html ``` ### 17. Validation States — Error Variant HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample17Demo = () => ( <> ); export default ListExample17Demo; ``` Angular: ```html ``` ### 18. Validation States — Success Variant HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample18Demo = () => ( <> ); export default ListExample18Demo; ``` Angular: ```html ``` ### 19. Validation States — Warning Variant HTML: ```html ``` React: ```jsx import React from 'react'; const ListExample19Demo = () => ( <> ); export default ListExample19Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.