Roles

PreviewCopy Anchor Link

Each role shows a color dot (when it has a color) and its name.

UsageCopy Anchor Link

import { z } from 'zod'
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormRoles } from '@vitnode/core/components/form/fields/input-roles'
import { searchAdminRolesInBrowser } from '@vitnode/core/tanstack/admin/roles'

search is required. In the AdminCP, use searchAdminRolesInBrowser: it reads the roles list (AdminCP session required) and skips the guest role.

const formSchema = z.object({ roleId: z.number() })

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'roleId',
      component: props => (
        <AutoFormRoles
          {...props}
          label="Primary role"
          placeholder="Select a role"
          search={searchAdminRolesInBrowser}
        />
      ),
    },
  ]}
/>

Editing an existing recordCopy Anchor Link

Pass the saved roles as selected, or the chips show raw ids.

<AutoFormRoles {...props} multiple search={search} selected={user.roles} />

Excluding rolesCopy Anchor Link

excludeIds hides roles another field already owns.

<AutoFormRoles
  {...props}
  excludeIds={[primaryRoleId]}
  multiple
  search={search}
/>

Names per languageCopy Anchor Link

The field shows the active locale's name, then the first translation, then the id.

import { roleOptionName } from '@vitnode/core/components/form/fields/input-roles'

roleOptionName(role, 'pl')

PropsCopy Anchor Link

RoleOption is { id, color, name }, with name as { languageCode, name }[].

See alsoCopy Anchor Link

• User - the same idea for people.
• Combobox - when the options are strings, not records.