ListView

ListView is a collection component that provides users with a list of interactive items. ListView is an ideal component for use cases such as Settings parameters.

View source code

Import

ListView: The list component.
ListItem: A helper component designed to represent an item inside a list.

Basic usage

Expense claims
Get reimbursed by submitting expense claims
Purchase orders
Validate orders internally before working with a supplier
Mileage allowances
Reimburse mileage allowances

<ListView aria-label="Payment methods activation">
  <ListItem key="1">
    <SwitchField
      label="Expense claims"
      helpText="Get reimbursed by submitting expense claims"
      isChecked={true}
      fit="parent"
    />
  </ListItem>
  <ListItem key="2">
    <SwitchField
      label="Purchase orders"
      helpText="Validate orders internally before working with a supplier"
      isChecked={false}
      fit="parent"
    />
  </ListItem>
  <ListItem key="3">
    <SwitchField
      label="Mileage allowances"
      helpText="Reimburse mileage allowances"
      isChecked={true}
      fit="parent"
    />
  </ListItem>
</ListView>