Content block

Chosen items

Already chosen records with identity, facts, and a remove action.

Copy the bindings from: app/features/forms/routes/dashboard/submitted-forms.kind/components/new-application-details-step.tsx
Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind

Empty

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <ChosenItemsList
    title="Animals"
    items={[]}
    onRemove={onRemove}
    addControl={<UnstyledButton
      onPress={onPress}
      className="w-full px-3 py-2.5 text-left text-sm font-medium text-brand-600"
    >
      + Add animal
    </UnstyledButton>}
  />
</Form>

One

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <ChosenItemsList
    title="Animals"
    items={[
      {
        id: 'cedar',
        label: 'Cedar',
        identity: <Avatar
          src="/img/dog-lover.png"
          altText=""
          size="small"
          shape="square"
        />,
      },
    ]}
    onRemove={onRemove}
    addControl={<UnstyledButton
      onPress={onPress}
      className="w-full px-3 py-2.5 text-left text-sm font-medium text-brand-600"
    >
      + Add animal
    </UnstyledButton>}
  />
</Form>

Many

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <ChosenItemsList
    title="Animals"
    items={[
      {
        id: 'cedar',
        label: 'Cedar',
        identity: <Avatar
          src="/img/dog-lover.png"
          altText=""
          size="small"
          shape="square"
        />,
      },
      {
        id: 'brie',
        label: 'Brie',
        identity: <Avatar
          name="Brie"
          src=""
          altText=""
          size="small"
          shape="square"
        />,
      },
    ]}
    onRemove={onRemove}
    addControl={<UnstyledButton
      onPress={onPress}
      className="w-full px-3 py-2.5 text-left text-sm font-medium text-brand-600"
    >
      + Add animal
    </UnstyledButton>}
  />
</Form>

Search and count

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <ChosenItemsList
    title="Animals"
    items={[
      {
        id: '0',
        label: 'Foster animal 1',
      },
      {
        id: '1',
        label: 'Foster animal 2',
      },
      {
        id: '2',
        label: 'Foster animal 3',
      },
      {
        id: '3',
        label: 'Foster animal 4',
      },
      {
        id: '4',
        label: 'Foster animal 5',
      },
      {
        id: '5',
        label: 'Foster animal 6',
      },
      {
        id: '6',
        label: 'Foster animal 7',
      },
      {
        id: '7',
        label: 'Foster animal 8',
      },
      {
        id: '8',
        label: 'Foster animal 9',
      },
      {
        id: '9',
        label: 'Foster animal 10',
      },
    ]}
    onRemove={onRemove}
  />
</Form>