Content block

Grouped checklist

Selectable field groups with facts, disabled reasons, count, and search.

Copy the bindings from: app/features/animals/routes/dashboard/animal-list.group/components/bulk-group-list.tsx
Route: /dashboard/accounts/:acctId/sites/:siteId/animal-list/:group

Empty

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <GroupedChecklist
    groups={[]}
    chosen={[]}
    onToggle={onToggle}
  />
</Form>

One

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <GroupedChecklist
    groups={[
      {
        heading: 'Primary information',
        items: [
          {
            id: 'gender',
            label: 'Gender',
          },
        ],
      },
    ]}
    chosen={[
      'gender',
    ]}
    onToggle={onToggle}
  />
</Form>

Groups, search, count and disabled reasons

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <GroupedChecklist
    groups={[
      {
        heading: 'Primary information',
        items: [
          {
            id: 'name',
            label: 'Name',
          },
          {
            id: 'gender',
            label: 'Gender',
          },
          {
            id: 'breed',
            label: 'Breeds',
          },
          {
            id: 'dob',
            label: 'Date of Birth',
          },
          {
            id: 'location',
            label: 'Location and Volunteer',
          },
          {
            id: 'siblings',
            label: 'Mark as siblings',
            reason: 'Select at least two animals.',
            isDisabled: true,
          },
        ],
      },
      {
        heading: 'Adoption and Listing',
        items: [
          {
            id: 'fee',
            label: 'Fee',
          },
          {
            id: 'tags',
            label: 'Tags',
          },
          {
            id: 'display',
            label: 'Public display settings',
          },
          {
            id: 'application',
            label: 'Application settings',
          },
        ],
      },
      {
        heading: 'Documents',
        items: [
          {
            id: 'document',
            label: 'Attach a document',
          },
        ],
      },
    ]}
    chosen={[
      'gender',
    ]}
    onToggle={onToggle}
  />
</Form>

Primary information

Fields11

Primary information

Adoption and Listing

Documents