CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-payloadcms--ui

UI components library for Payload CMS providing React components, hooks, forms, and styling for building admin interfaces and extensible UI elements.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

fields.mddocs/

Field Components

Form field components for all data types including text, selection, rich content, and complex structured data. All field components integrate with the form system and provide consistent validation, labeling, and error handling.

Text Fields

TextField

Single-line text input field.

interface TextFieldProps {
  path: string;
  label?: string;
  placeholder?: string;
  required?: boolean;
  readOnly?: boolean;
  validate?: (value: string) => string | true;
  admin?: {
    description?: string;
    condition?: (data: Record<string, unknown>) => boolean;
  };
}

function TextField(props: TextFieldProps): JSX.Element;

TextInput

Standalone text input component (without form integration).

interface TextInputProps {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  readOnly?: boolean;
  hasError?: boolean;
  className?: string;
}

function TextInput(props: TextInputProps): JSX.Element;

TextareaField

Multi-line text input field.

interface TextareaFieldProps {
  path: string;
  label?: string;
  placeholder?: string;
  required?: boolean;
  readOnly?: boolean;
  rows?: number;
  validate?: (value: string) => string | true;
}

function TextareaField(props: TextareaFieldProps): JSX.Element;

TextareaInput

Standalone textarea input component.

interface TextAreaInputProps {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  readOnly?: boolean;
  rows?: number;
  hasError?: boolean;
}

function TextareaInput(props: TextAreaInputProps): JSX.Element;

EmailField

Email input field with validation.

interface EmailFieldProps {
  path: string;
  label?: string;
  placeholder?: string;
  required?: boolean;
  readOnly?: boolean;
}

function EmailField(props: EmailFieldProps): JSX.Element;

PasswordField

Password input field.

interface PasswordFieldProps {
  path: string;
  label?: string;
  placeholder?: string;
  required?: boolean;
  readOnly?: boolean;
  autoComplete?: string;
}

function PasswordField(props: PasswordFieldProps): JSX.Element;

ConfirmPasswordField

Password confirmation field with matching validation.

interface ConfirmPasswordFieldProps {
  path: string;
  label?: string;
  placeholder?: string;
  required?: boolean;
  passwordPath?: string;
}

function ConfirmPasswordField(props: ConfirmPasswordFieldProps): JSX.Element;

Selection Fields

SelectField

Dropdown selection field.

interface SelectFieldProps {
  path: string;
  label?: string;
  placeholder?: string;
  required?: boolean;
  readOnly?: boolean;
  options: SelectOption[];
  hasMany?: boolean;
}

interface SelectOption {
  label: string;
  value: string | number;
  disabled?: boolean;
}

function SelectField(props: SelectFieldProps): JSX.Element;

SelectInput

Standalone select input component.

interface SelectInputProps {
  value?: string | number | (string | number)[];
  onChange?: (value: string | number | (string | number)[]) => void;
  options: SelectOption[];
  placeholder?: string;
  disabled?: boolean;
  hasMany?: boolean;
}

function SelectInput(props: SelectInputProps): JSX.Element;

RadioGroupField

Radio button group field.

interface RadioGroupFieldProps {
  path: string;
  label?: string;
  required?: boolean;
  readOnly?: boolean;
  options: RadioOption[];
  layout?: 'horizontal' | 'vertical';
}

interface RadioOption {
  label: string;
  value: string | number;
  disabled?: boolean;
}

function RadioGroupField(props: RadioGroupFieldProps): JSX.Element;

CheckboxField

Checkbox input field.

interface CheckboxFieldProps {
  path: string;
  label?: string;
  required?: boolean;
  readOnly?: boolean;
}

function CheckboxField(props: CheckboxFieldProps): JSX.Element;

CheckboxInput

Standalone checkbox input component.

interface CheckboxInputProps {
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  disabled?: boolean;
  readOnly?: boolean;
  label?: string;
}

function CheckboxInput(props: CheckboxInputProps): JSX.Element;

Complex Fields

RelationshipField

Relationship selection field for connecting documents.

interface RelationshipFieldProps {
  path: string;
  label?: string;
  relationTo: string | string[];
  hasMany?: boolean;
  maxDepth?: number;
  required?: boolean;
  readOnly?: boolean;
  admin?: {
    allowCreate?: boolean;
    isSortable?: boolean;
  };
}

function RelationshipField(props: RelationshipFieldProps): JSX.Element;

RelationshipInput

Standalone relationship input component.

interface RelationshipInputProps {
  value?: RelationshipValue | RelationshipValue[];
  onChange?: (value: RelationshipValue | RelationshipValue[]) => void;
  relationTo: string | string[];
  hasMany?: boolean;
  disabled?: boolean;
}

interface RelationshipValue {
  relationTo: string;
  value: string | number | Record<string, unknown>;
}

function RelationshipInput(props: RelationshipInputProps): JSX.Element;

UploadField

File upload field.

interface UploadFieldProps {
  path: string;
  label?: string;
  relationTo: string;
  required?: boolean;
  readOnly?: boolean;
  admin?: {
    description?: string;
  };
}

function UploadField(props: UploadFieldProps): JSX.Element;

UploadInput

Standalone upload input component.

interface UploadInputProps {
  value?: UploadValue;
  onChange?: (value: UploadValue | null) => void;
  relationTo: string;
  disabled?: boolean;
}

interface UploadValue {
  id: string;
  filename: string;
  mimeType: string;
  filesize: number;
  width?: number;
  height?: number;
}

function UploadInput(props: UploadInputProps): JSX.Element;

RichTextField

Rich text editor field.

interface RichTextFieldProps {
  path: string;
  label?: string;
  required?: boolean;
  readOnly?: boolean;
  admin?: {
    elements?: RichTextElement[];
    leaves?: RichTextLeaf[];
    upload?: {
      collections: {
        [collection: string]: {
          fields: FieldConfig[];
        };
      };
    };
  };
}

function RichTextField(props: RichTextFieldProps): JSX.Element;

CodeField

Code editor field with syntax highlighting.

interface CodeFieldProps {
  path: string;
  label?: string;
  required?: boolean;
  readOnly?: boolean;
  admin?: {
    language?: string;
    editorOptions?: Record<string, unknown>;
  };
}

function CodeField(props: CodeFieldProps): JSX.Element;

JSONField

JSON editor field.

interface JSONFieldProps {
  path: string;
  label?: string;
  required?: boolean;
  readOnly?: boolean;
  admin?: {
    editorOptions?: Record<string, unknown>;
  };
}

function JSONField(props: JSONFieldProps): JSX.Element;

Structural Fields

GroupField

Field grouping container.

interface GroupFieldProps {
  path: string;
  label?: string;
  fields: FieldConfig[];
  admin?: {
    hideGutter?: boolean;
    description?: string;
  };
}

function GroupField(props: GroupFieldProps): JSX.Element;

ArrayField

Dynamic array of fields.

interface ArrayFieldProps {
  path: string;
  label?: string;
  fields: FieldConfig[];
  minRows?: number;
  maxRows?: number;
  required?: boolean;
  admin?: {
    initCollapsed?: boolean;
    components?: {
      RowLabel?: React.ComponentType<RowLabelProps>;
    };
  };
}

function ArrayField(props: ArrayFieldProps): JSX.Element;

BlocksField

Blocks/layout builder field.

interface BlocksFieldProps {
  path: string;
  label?: string;
  blocks: BlockConfig[];
  minRows?: number;
  maxRows?: number;
  required?: boolean;
  admin?: {
    initCollapsed?: boolean;
  };
}

interface BlockConfig {
  slug: string;
  labels: {
    singular: string;
    plural: string;
  };
  fields: FieldConfig[];
  admin?: {
    components?: {
      Icon?: React.ComponentType;
    };
  };
}

function BlocksField(props: BlocksFieldProps): JSX.Element;

CollapsibleField

Collapsible field container.

interface CollapsibleFieldProps {
  path?: string;
  label: string;
  fields: FieldConfig[];
  admin?: {
    initCollapsed?: boolean;
    description?: string;
  };
}

function CollapsibleField(props: CollapsibleFieldProps): JSX.Element;

RowField

Horizontal field layout.

interface RowFieldProps {
  fields: FieldConfig[];
  admin?: {
    className?: string;
  };
}

function RowField(props: RowFieldProps): JSX.Element;

TabsField

Tabbed field interface.

interface TabsFieldProps {
  tabs: TabConfig[];
}

interface TabConfig {
  label: string;
  fields: FieldConfig[];
  admin?: {
    condition?: (data: Record<string, unknown>) => boolean;
    description?: string;
  };
}

function TabsField(props: TabsFieldProps): JSX.Element;

Specialized Fields

DateTimeField

Date and time picker field.

interface DateTimeFieldProps {
  path: string;
  label?: string;
  required?: boolean;
  readOnly?: boolean;
  admin?: {
    date?: {
      pickerAppearance?: 'default' | 'dayOnly' | 'timeOnly';
      displayFormat?: string;
    };
  };
}

function DateTimeField(props: DateTimeFieldProps): JSX.Element;

NumberField

Number input field.

interface NumberFieldProps {
  path: string;
  label?: string;
  required?: boolean;
  readOnly?: boolean;
  min?: number;
  max?: number;
  step?: number;
}

function NumberField(props: NumberFieldProps): JSX.Element;

PointField

Geographic point (coordinates) field.

interface PointFieldProps {
  path: string;
  label?: string;
  required?: boolean;
  readOnly?: boolean;
}

function PointField(props: PointFieldProps): JSX.Element;

JoinField

Join relationships field.

interface JoinFieldProps {
  path: string;
  collection: string;
  on: string;
  admin?: {
    where?: Record<string, unknown>;
    maxDepth?: number;
  };
}

function JoinField(props: JoinFieldProps): JSX.Element;

UIField

Custom UI component field.

interface UIFieldProps {
  path?: string;
  admin: {
    components: {
      Field: React.ComponentType<any>;
    };
  };
}

function UIField(props: UIFieldProps): JSX.Element;

HiddenField

Hidden form field.

interface HiddenFieldProps {
  path: string;
  value?: unknown;
}

function HiddenField(props: HiddenFieldProps): JSX.Element;

Field Support Components

FieldLabel

Consistent field labeling component.

interface FieldLabelProps {
  htmlFor?: string;
  label?: string;
  required?: boolean;
}

function FieldLabel(props: FieldLabelProps): JSX.Element;

FieldDescription

Field help text component.

interface FieldDescriptionProps {
  description?: string;
}

function FieldDescription(props: FieldDescriptionProps): JSX.Element;

FieldError

Field error display component.

interface FieldErrorProps {
  message?: string;
  showError?: boolean;
}

function FieldError(props: FieldErrorProps): JSX.Element;

Field Components Registry

Access all field components through the registry.

const fieldComponents: {
  [fieldType: string]: React.ComponentType<any>;
};

const allFieldComponents: {
  [fieldType: string]: React.ComponentType<any>;
};

Usage example:

import { fieldComponents } from '@payloadcms/ui';

// Dynamically render field based on type
function RenderField({ field, path }) {
  const FieldComponent = fieldComponents[field.type];
  
  if (!FieldComponent) {
    return <div>Unsupported field type: {field.type}</div>;
  }
  
  return <FieldComponent {...field} path={path} />;
}

Types

interface FieldConfig {
  type: string;
  name: string;
  label?: string;
  required?: boolean;
  admin?: Record<string, unknown>;
}

interface RowLabelProps {
  data: Record<string, unknown>;
  index: number;
  path: string;
}

type RichTextElement = 
  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  | 'blockquote' | 'ul' | 'ol' | 'li'
  | 'link' | 'relationship' | 'upload';

type RichTextLeaf = 
  | 'bold' | 'italic' | 'underline' | 'strikethrough' 
  | 'code' | 'subscript' | 'superscript';

Install with Tessl CLI

npx tessl i tessl/npm-payloadcms--ui

docs

components.md

fields.md

forms.md

hooks.md

icons.md

index.md

providers.md

utilities.md

tile.json