Content block

Editable membership

People with add and remove controls, empty state, and search.

Copy the bindings from
app/features/people/routes/volunteers.settings.roles.roleId/components/role-holders-rail.tsx
Route
/dashboard/accounts/:acctId/sites/:siteId/volunteers/settings/roles/:roleId
Empty

People with this role0

No one holds this role yet.

    Printed props
    <Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <MembershipList
    people={[]}
    onRemove={onRemove}
    addControl={<FormComboBox
      name="newMember"
      label="Add a person"
      className="[&_label]:sr-only"
      placeholder="Add a person…"
      options={[
        {
          id: 'vera',
          label: 'Vera Volunteer',
          description: '[email protected]',
        },
      ]}
      onSelectionChange={onSelectionChange}
    />}
  />
</Form>
    One

    People with this role1

    Printed props
    <Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <MembershipList
    people={[
      {
        id: 'katie',
        name: 'Katie Dunn',
        email: '[email protected]',
      },
    ]}
    onRemove={onRemove}
    addControl={<FormComboBox
      name="newMember"
      label="Add a person"
      className="[&_label]:sr-only"
      placeholder="Add a person…"
      options={[
        {
          id: 'vera',
          label: 'Vera Volunteer',
          description: '[email protected]',
        },
      ]}
      onSelectionChange={onSelectionChange}
    />}
  />
</Form>
    Many

    People with this role2

    Kind decides whether they appear on the volunteer or foster list.

    Printed props
    <Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <MembershipList
    people={[
      {
        id: 'katie',
        name: 'Katie Dunn',
        email: '[email protected]',
      },
      {
        id: 'lisa',
        name: 'Lisa Hansen',
        email: '[email protected]',
      },
    ]}
    onRemove={onRemove}
    addControl={<FormComboBox
      name="newMember"
      label="Add a person"
      className="[&_label]:sr-only"
      placeholder="Add a person…"
      options={[
        {
          id: 'vera',
          label: 'Vera Volunteer',
          description: '[email protected]',
        },
      ]}
      onSelectionChange={onSelectionChange}
    />}
    description="Kind decides whether they appear on the volunteer or foster list."
  />
</Form>
    Search, count and busy

    People with this role10

    Printed props
    <Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <MembershipList
    people={[
      {
        id: '0',
        name: 'Transport volunteer 1',
        email: '[email protected]',
      },
      {
        id: '1',
        name: 'Transport volunteer 2',
        email: '[email protected]',
      },
      {
        id: '2',
        name: 'Transport volunteer 3',
        email: '[email protected]',
      },
      {
        id: '3',
        name: 'Transport volunteer 4',
        email: '[email protected]',
      },
      {
        id: '4',
        name: 'Transport volunteer 5',
        email: '[email protected]',
      },
      {
        id: '5',
        name: 'Transport volunteer 6',
        email: '[email protected]',
      },
      {
        id: '6',
        name: 'Transport volunteer 7',
        email: '[email protected]',
      },
      {
        id: '7',
        name: 'Transport volunteer 8',
        email: '[email protected]',
      },
      {
        id: '8',
        name: 'Transport volunteer 9',
        email: '[email protected]',
      },
      {
        id: '9',
        name: 'Transport volunteer 10',
        email: '[email protected]',
      },
    ]}
    onRemove={onRemove}
    isBusy
  />
</Form>