Forms on Palmyra

MuiTextField

Mon, 01 Jan 0001 00:00:00 +0000

MuiTextField#

@palmyralabs/rt-forms-mui · form/MuiTextField.tsx

Overview#

MUI TextField wired into PalmyraForm — the default single-line text input.

Props — `ITextFieldDefinition & TextFieldProps`#

Common field props (see Forms overview) plus every MUI TextFieldProps (variant, placeholder, InputProps, helperText, error, …).

Ref — `ITextField`#

interface ITextField {
  focus(): void;
  getValue(): any;
  setValue(v: any): void;
  isValid(): boolean;
  clear(): void;
}

Example#

<MuiTextField
  attribute="loginName"
  label="Email"
  variant="outlined"
  required
  validRule="email"
/>

MuiTextArea

Mon, 01 Jan 0001 00:00:00 +0000

MuiTextArea#

@palmyralabs/rt-forms-mui · form/MuiTextArea.tsx

Overview#

Multi-line variant — MUI TextField with multiline enabled.

Props — `ITextFieldDefinition & TextFieldProps`#

Common field props plus MUI TextFieldProps (rows, minRows, maxRows, variant, …).

Ref — `ITextField`#

Same as MuiTextField.

Example#

<MuiTextArea
  attribute="address"
  label="Address"
  rows={4}
  colspan={2}
/>

MuiPassword

Mon, 01 Jan 0001 00:00:00 +0000

MuiPassword#

@palmyralabs/rt-forms-mui · form/MuiPassword.tsx

Overview#

Masked input with an MUI-icon visibility toggle (built from TextField + IconButton + @mui/icons-material).

Props — `ITextFieldDefinition & TextFieldProps`#

Common field props + MUI TextFieldProps.

Ref — `ITextField`#

Same as MuiTextField.

Example#

<MuiPassword
  attribute="password"
  label="Password"
  variant="outlined"
  required
  regExp={{
    regex: /^(?=.*[A-Z])(?=.*\d).{8,}$/,
    errorMessage: '8+ chars with uppercase and digit',
  }}
/>

MuiIntegerField

Mon, 01 Jan 0001 00:00:00 +0000

MuiIntegerField#

@palmyralabs/rt-forms-mui · form/MuiIntegerField.tsx

Overview#

Integer-only numeric input — rejects decimals. Uses MUI TextField with type-restricted input handling.

Props — `ITextFieldDefinition & TextFieldProps`#

Common field props + MUI TextFieldProps.

Ref — `ITextField`#

Same as MuiTextField.

Example#

<MuiIntegerField
  attribute="quantity"
  label="Quantity"
  variant="outlined"
  defaultValue={1}
/>

MuiNumberField

Mon, 01 Jan 0001 00:00:00 +0000

MuiNumberField#

@palmyralabs/rt-forms-mui · form/MuiNumberField.tsx

Overview#

General numeric input — accepts decimals. MUI TextField with numeric formatting.

Props — `ITextFieldDefinition & TextFieldProps`#

Common field props + MUI TextFieldProps.

Ref — `ITextField`#

Same as MuiTextField.

Example#

<MuiNumberField
  attribute="unitPrice"
  label="Unit price"
  variant="outlined"
  defaultValue={0}
/>

MuiCheckBox

Mon, 01 Jan 0001 00:00:00 +0000

MuiCheckBox#

@palmyralabs/rt-forms-mui · form/MuiCheckBox.tsx

Overview#

Single boolean checkbox — MUI Checkbox inside FormControlLabel.

Props — `ICheckBoxDefinition & CheckboxProps`#

Common field props plus icon / checkedIcon and every MUI CheckboxProps (color, size, indeterminate, …).

Ref — `ICheckBoxField`#

interface ICheckBoxField {
  focus(): void;
  getValue(): boolean;
  setValue(v: boolean): void;
  isValid(): boolean;
  toggle(): void;
}

Example#

<MuiCheckBox
  attribute="acceptsMarketing"
  label="Send me product updates"
  defaultValue={false}
/>

MuiCheckBoxGroup

Mon, 01 Jan 0001 00:00:00 +0000

MuiCheckBoxGroup#

@palmyralabs/rt-forms-mui · form/MuiCheckBoxGroup.tsx

Overview#

Multiple checkboxes driven by an options array — stores an array of selected values.

Props — `ICheckBoxGroupDefinition & CheckboxProps`#

Common field props plus:

Prop	Type	Purpose
`options`	`Array<{ value, label }>`	Checkbox entries
`flexDirection`	`'row' \| 'column'?`	Layout orientation

Plus MUI CheckboxProps for individual checkbox styling.

Ref — `ICheckBoxField`#

Same as MuiCheckBox.

Example#

<MuiCheckBoxGroup
  attribute="tags"
  label="Tags"
  flexDirection="row"
  options={[
    { value: 'WHOLESALE', label: 'Wholesale' },
    { value: 'RETAIL',    label: 'Retail' },
    { value: 'VIP',       label: 'VIP' },
  ]}
/>

MuiSwitch

Mon, 01 Jan 0001 00:00:00 +0000

MuiSwitch#

@palmyralabs/rt-forms-mui · form/MuiSwitch.tsx

Overview#

Toggle switch. Accepts a two-value options pair to store anything non-boolean (e.g. 'Y' / 'N'). The switch prop selects from four styled variants: 'MaterialUISwitch', 'Android12Switch', 'IOSSwitch', or the default 'Switch'.

Props — `ISwitchDefinition & SwitchProps`#

Common field props plus:

Prop	Type	Purpose
`options`	`{ onValue, offValue }?`	Values written to form data for on/off
`switch`	`'MaterialUISwitch' \| 'Android12Switch' \| 'IOSSwitch' \| 'Switch'?`	Styled switch variant

Plus MUI SwitchProps (color, size, …).

MuiRadioGroup

Mon, 01 Jan 0001 00:00:00 +0000

MuiRadioGroup#

@palmyralabs/rt-forms-mui · form/MuiRadioGroup.tsx

Overview#

Grouped radio buttons. MUI RadioGroup + Radio + FormControlLabel.

Props — `IRadioGroupDefinition & RadioProps`#

Common field props plus:

Prop	Type	Purpose
`options`	`Array<{ value, label }>`	Radio entries
`flexDirection`	`'row' \| 'column'?`	Layout orientation

Plus MUI RadioProps (color, size, …).

Example#

<MuiRadioGroup
  attribute="delivery"
  label="Delivery option"
  flexDirection="row"
  options={[
    { value: 'STANDARD',  label: 'Standard (3–5 days)' },
    { value: 'EXPRESS',   label: 'Express (1–2 days)' },
    { value: 'OVERNIGHT', label: 'Overnight' },
  ]}
/>

MuiSelect

Mon, 01 Jan 0001 00:00:00 +0000

MuiSelect#

@palmyralabs/rt-forms-mui · form/MuiSelect.tsx

Overview#

Single-select dropdown backed by a static options array — MUI Select + MenuItem. For server-sourced options use MuiServerLookup.

Props — `ISelectDefinition & SelectProps`#

Common field props plus:

Prop	Type	Purpose
`options`	`Array<{ value, label }>`	Dropdown entries

Plus MUI SelectProps (variant, multiple, native, displayEmpty, …).

Example#

<MuiSelect
  attribute="status"
  label="Status"
  variant="outlined"
  options={[
    { value: 'ACTIVE',   label: 'Active' },
    { value: 'ARCHIVED', label: 'Archived' },
  ]}
/>

MuiRating

Mon, 01 Jan 0001 00:00:00 +0000

MuiRating#

@palmyralabs/rt-forms-mui · form/MuiRating.tsx

Overview#

Star-rating input — MUI Rating with @mui/icons-material star icons.

Props — `IRatingDefinition & RatingProps`#

Common field props plus:

Prop	Type	Purpose
`variant`	`string?`	Optional icon variant override

Plus MUI RatingProps (precision, max, size, icon, emptyIcon, …).

Example#

<MuiRating
  attribute="feedback"
  label="Feedback"
  max={5}
  precision={0.5}
/>

MuiDatePicker

Mon, 01 Jan 0001 00:00:00 +0000

MuiDatePicker#

@palmyralabs/rt-forms-mui · form/MuiDatePicker.tsx

Overview#

Date picker from @mui/x-date-pickers. Requires a LocalizationProvider ancestor (see MUI setup). Stores the value in serverPattern, displays it in displayPattern.

Props — `IDatePickerDefinition & DatePickerProps<any>`#

Common field props plus:

Prop	Type	Purpose
`serverPattern`	`string?`	Wire format (e.g. `YYYY-MM-DD`) — what gets saved
`displayPattern`	`string?`	UI format (e.g. `DD MMM YYYY`) — what the user sees

Plus MUI DatePickerProps (minDate, maxDate, views, format, slotProps, …).

Ref — `IDateField`#

interface IDateField {
  focus(): void;
  getValue(): any;
  setValue(v: any): void;
  isValid(): boolean;
}

Example#

<MuiDatePicker
  attribute="invoiceDate"
  label="Invoice date"
  serverPattern="YYYY-MM-DD"
  displayPattern="DD MMM YYYY"
/>

MuiDateTimePicker

Mon, 01 Jan 0001 00:00:00 +0000

MuiDateTimePicker#

@palmyralabs/rt-forms-mui · form/MuiDateTimePicker.tsx

Overview#

Combined date + time picker from @mui/x-date-pickers. Requires a LocalizationProvider ancestor.

Props — `IDatePickerDefinition & DatePickerProps<any>`#

Common field props + serverPattern / displayPattern + MUI DatePickerProps (accepts DateTimePicker props via the underlying component).

Ref — `IDateField`#

Same as MuiDatePicker.

Example#

<MuiDateTimePicker
  attribute="startsAt"
  label="Starts at"
  serverPattern="YYYY-MM-DD HH:mm:ss"
  displayPattern="DD MMM YYYY HH:mm"
/>

MuiTimePicker

Mon, 01 Jan 0001 00:00:00 +0000

MuiTimePicker#

@palmyralabs/rt-forms-mui · form/MuiTimePicker.tsx

Overview#

Time-only picker — TimePicker from @mui/x-date-pickers. Requires a LocalizationProvider ancestor.

Props — `IDatePickerDefinition & TimePickerProps<any>`#

Common field props + serverPattern / displayPattern + MUI TimePickerProps (views, ampm, minutesStep, slotProps, …).

Ref — `IDateField`#

Same as MuiDatePicker.

Example#

<MuiTimePicker
  attribute="opensAt"
  label="Opens at"
  serverPattern="HH:mm"
  displayPattern="HH:mm"
/>

MuiDateRangePicker

Mon, 01 Jan 0001 00:00:00 +0000

MuiDateRangePicker#

@palmyralabs/rt-forms-mui · form/MuiDateRangePicker.tsx

Overview#

Date-range picker — composed of two DatePicker instances. Stores the value as a { from, to } object (local DateRange type).

Props — `IDatePickerDefinition & DatePickerProps<any>`#

Common field props + serverPattern / displayPattern + MUI DatePickerProps applied to each of the two pickers.

Ref — `IDateField`#

Same as MuiDatePicker.

Example#

<MuiDateRangePicker
  attribute="reportRange"
  label="Report period"
  serverPattern="YYYY-MM-DD"
  displayPattern="DD MMM YYYY"
/>

The stored value looks like { from: '2026-01-01', to: '2026-01-31' }.

MuiServerLookup

Mon, 01 Jan 0001 00:00:00 +0000

MuiServerLookup#

@palmyralabs/rt-forms-mui · form/MuiServerLookup.tsx

Overview#

Single- or multi-value lookup backed by a Wire store — debounced query by queryAttribute, stores idAttribute, displays labelAttribute / displayAttribute. Built on MUI Autocomplete; the only form component in the MUI package that uses useServerLookupFieldManager instead of useFieldManager.

Props — `IServerLookupInput`#

Common field props plus:

Prop	Type	Purpose
`queryOptions`	`{ endPoint, queryAttribute, labelAttribute, idAttribute, storeOptions?, delay? }`	Wire query descriptor
`displayAttribute`	`string \| string[]?`	Attribute(s) shown in the dropdown row
`multiple`	`boolean?`	Store an array of ids
`renderOption`	`(item) => ReactNode?`	Custom row renderer
`defaultValue`	`any?`	Initial value(s)

Plus MUI AutocompleteProps passthrough (size, disableClearable, filterOptions, …).

MuiTextView

Mon, 01 Jan 0001 00:00:00 +0000

MuiTextView#

@palmyralabs/rt-forms-mui · form/MuiTextView.tsx

Overview#

Read-only text display — the view-mode counterpart to MuiTextField. Renders a plain <span> instead of a text input; useful for detail screens where you still want the field to participate in the form contract.

Props — `ITextFieldDefinition & TextViewAttributeDefinition`#

Common field props plus:

Prop	Type	Purpose
`prefix`	`string?`	Text rendered before the value
`suffix`	`string?`	Text rendered after the value
`pattern`	`string?`	Optional format pattern applied to the value

Example#

<MuiTextView
  attribute="loginName"
  label="Email"
/>

MuiDateView

Mon, 01 Jan 0001 00:00:00 +0000

MuiDateView#

@palmyralabs/rt-forms-mui · form/MuiDateView.tsx

Overview#

Read-only date display — counterpart to MuiDatePicker. Formats the raw value from serverPattern to displayPattern and renders it as text.

Props — `IDatePickerDefinition & TextViewAttributeDefinition`#

Common field props + serverPattern / displayPattern + view-mode props (prefix, suffix).

Example#

<MuiDateView
  attribute="createdAt"
  label="Created on"
  serverPattern="YYYY-MM-DD"
  displayPattern="DD MMM YYYY"
/>

MuiOptionsView

Mon, 01 Jan 0001 00:00:00 +0000

MuiOptionsView#

@palmyralabs/rt-forms-mui · form/MuiOptionsView.tsx

Overview#

Read-only option-label display — counterpart to MuiSelect / MuiRadioGroup. Looks up the current value against the options array and renders the matching label, so a stored code like 'ACTIVE' displays as "Active".

Props — `ISelectDefinition & TextViewAttributeDefinition`#

Common field props + options: Array<{ value, label }> + view-mode props (prefix, suffix).

Example#

<MuiOptionsView
  attribute="status"
  label="Status"
  options={[
    { value: 'ACTIVE',   label: 'Active' },
    { value: 'ARCHIVED', label: 'Archived' },
  ]}
/>

MuiLookupView

Mon, 01 Jan 0001 00:00:00 +0000

MuiLookupView#

@palmyralabs/rt-forms-mui · form/MuiLookupView.tsx

Overview#

Read-only foreign-key display — counterpart to MuiServerLookup. Resolves the stored id against lookupOptions and renders the referenced record’s label.

Props — `ILookupViewOptions & TextViewAttributeDefinition`#

Common field props plus:

Prop	Type	Purpose
`lookupOptions`	`{ idAttribute, labelAttribute, endPoint?, ... }`	How to resolve the id into a displayable label

Plus view-mode props (prefix, suffix).

Example#

<MuiLookupView
  attribute="manufacturerId"
  label="Manufacturer"
  lookupOptions={{
    endPoint: '/mstManufacturer',
    idAttribute: 'id',
    labelAttribute: 'name',
  }}
/>

Forms on Palmyra

MuiTextField

MuiTextField#

Overview#

Props — ITextFieldDefinition & TextFieldProps#

Ref — ITextField#

Example#

MuiTextArea

MuiTextArea#

Overview#

Props — ITextFieldDefinition & TextFieldProps#

Ref — ITextField#

Example#

MuiPassword

MuiPassword#

Overview#

Props — ITextFieldDefinition & TextFieldProps#

Ref — ITextField#

Example#

MuiIntegerField

MuiIntegerField#

Overview#

Props — ITextFieldDefinition & TextFieldProps#

Ref — ITextField#

Example#

MuiNumberField

MuiNumberField#

Overview#

Props — ITextFieldDefinition & TextFieldProps#

Ref — ITextField#

Example#

MuiCheckBox

MuiCheckBox#

Overview#

Props — ICheckBoxDefinition & CheckboxProps#

Ref — ICheckBoxField#

Example#

MuiCheckBoxGroup

MuiCheckBoxGroup#

Overview#

Props — ICheckBoxGroupDefinition & CheckboxProps#

Ref — ICheckBoxField#

Example#

MuiSwitch

MuiSwitch#

Overview#

Props — ISwitchDefinition & SwitchProps#

MuiRadioGroup

MuiRadioGroup#

Overview#

Props — IRadioGroupDefinition & RadioProps#

Example#

MuiSelect

MuiSelect#

Overview#

Props — ISelectDefinition & SelectProps#

Example#

MuiRating

MuiRating#

Overview#

Props — IRatingDefinition & RatingProps#

Example#

MuiDatePicker

MuiDatePicker#

Overview#

Props — IDatePickerDefinition & DatePickerProps<any>#

Ref — IDateField#

Example#

MuiDateTimePicker

MuiDateTimePicker#

Overview#

Props — IDatePickerDefinition & DatePickerProps<any>#

Ref — IDateField#

Example#

MuiTimePicker

MuiTimePicker#

Overview#

Props — IDatePickerDefinition & TimePickerProps<any>#

Ref — IDateField#

Example#

Props — `ITextFieldDefinition & TextFieldProps`#

Ref — `ITextField`#

Props — `ITextFieldDefinition & TextFieldProps`#

Ref — `ITextField`#

Props — `ITextFieldDefinition & TextFieldProps`#

Ref — `ITextField`#

Props — `ITextFieldDefinition & TextFieldProps`#

Ref — `ITextField`#

Props — `ITextFieldDefinition & TextFieldProps`#

Ref — `ITextField`#

Props — `ICheckBoxDefinition & CheckboxProps`#

Ref — `ICheckBoxField`#

Props — `ICheckBoxGroupDefinition & CheckboxProps`#

Ref — `ICheckBoxField`#

Props — `ISwitchDefinition & SwitchProps`#

Props — `IRadioGroupDefinition & RadioProps`#

Props — `ISelectDefinition & SelectProps`#

Props — `IRatingDefinition & RatingProps`#

Props — `IDatePickerDefinition & DatePickerProps<any>`#

Ref — `IDateField`#

Props — `IDatePickerDefinition & DatePickerProps<any>`#

Ref — `IDateField`#

Props — `IDatePickerDefinition & TimePickerProps<any>`#

Ref — `IDateField`#

Props — `IDatePickerDefinition & DatePickerProps<any>`#

Ref — `IDateField`#

Props — `IServerLookupInput`#

Props — `ITextFieldDefinition & TextViewAttributeDefinition`#

Props — `IDatePickerDefinition & TextViewAttributeDefinition`#

Props — `ISelectDefinition & TextViewAttributeDefinition`#

Props — `ILookupViewOptions & TextViewAttributeDefinition`#