Content block

Selectable roles

Choose roles with their badges, descriptions, counts, and disabled reasons.

Copy the bindings from: app/features/people/components/wizard-steps.tsx
Route: /dashboard/accounts/:acctId/sites/:siteId/volunteers/pending

Empty

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <RoleSelectRows
    selectedIds={[
      'volunteer',
    ]}
    onChange={onChange}
    name="emptyRoles"
    roles={[]}
  />
</Form>

One

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <RoleSelectRows
    selectedIds={[
      'volunteer',
    ]}
    onChange={onChange}
    name="oneRole"
    roles={[
      {
        id: 'volunteer',
        name: 'General Volunteer',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
    ]}
  />
</Form>

Many

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <RoleSelectRows
    selectedIds={[
      'volunteer',
    ]}
    onChange={onChange}
    name="roles"
    roles={[
      {
        id: 'volunteer',
        name: 'General Volunteer',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'foster',
        name: 'Foster',
        badge: <ListStatus
          status="Foster"
          tone="pink"
          dot={false}
        />,
        description: 'Edit assigned animals · Edit assigned adoption forms',
        holderCount: 1,
        isBuiltIn: true,
      },
    ]}
  />
</Form>

Search and count

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <RoleSelectRows
    selectedIds={[
      'volunteer',
    ]}
    onChange={onChange}
    name="manyRoles"
    roles={[
      {
        id: 'role-0',
        name: 'Transport team 1',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-1',
        name: 'Transport team 2',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-2',
        name: 'Transport team 3',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-3',
        name: 'Transport team 4',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-4',
        name: 'Transport team 5',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-5',
        name: 'Transport team 6',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-6',
        name: 'Transport team 7',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-7',
        name: 'Transport team 8',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-8',
        name: 'Transport team 9',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
      {
        id: 'role-9',
        name: 'Transport team 10',
        badge: <ListStatus
          status="Volunteer"
          tone="indigo"
          dot={false}
        />,
        description: 'View all animals',
        holderCount: 4,
        isBuiltIn: true,
      },
    ]}
  />
</Form>

Roles10