Forms on Palmyra

MantineTextField

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

MantineTextField#

@palmyralabs/rt-forms-mantine · form/MantineTextField.tsx

Overview#

Mantine TextInput wired into PalmyraForm. The default single-line text widget.

Props — `ITextFieldDefinition & TextInputProps`#

Common field props (see Forms overview) plus every TextInputProps (placeholder, variant, leftSection, rightSection, radius, description, error, …).

Ref — `ITextField`#

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

Example#

<MantineTextField
  attribute="loginName"
  label="Email"
  required
  validRule="email"
  placeholder="ada@example.com"
/>

MantineTextArea

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

MantineTextArea#

@palmyralabs/rt-forms-mantine · form/MantineTextArea.tsx

Overview#

Multi-line variant. Mantine Textarea + PalmyraForm field manager.

Props — `ITextFieldDefinition & TextareaProps`#

Common field props plus Mantine TextareaProps (autosize, minRows, maxRows, resize, …).

Ref — `ITextField`#

Same as MantineTextField.

Example#

<MantineTextArea
  attribute="address"
  label="Address"
  autosize
  minRows={3}
  maxRows={6}
  colspan={2}
/>

MantinePasswordField

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

MantinePasswordField#

@palmyralabs/rt-forms-mantine · form/MantinePasswordField.tsx

Overview#

Masked input with Mantine’s built-in visibility toggle.

Props — `ITextFieldDefinition & PasswordInputProps`#

Common field props plus Mantine PasswordInputProps (visible, onVisibilityChange, visibilityToggleIcon, …).

Ref — `ITextField`#

Same as MantineTextField.

Example#

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

MantineNumberField

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

MantineNumberField#

@palmyralabs/rt-forms-mantine · form/MantineNumberField.tsx

Overview#

Numeric input — Mantine NumberInput.

Props — `ITextFieldDefinition & NumberInputProps`#

Common field props plus Mantine NumberInputProps (min, max, step, decimalScale, thousandSeparator, prefix, suffix, …).

Ref — `ITextField`#

Same as MantineTextField.

Example#

<MantineNumberField
  attribute="rating"
  label="Rating"
  min={0} max={5} step={1}
  defaultValue={0}
/>

MantineNumberPickerInput

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

MantineNumberPickerInput#

@palmyralabs/rt-forms-mantine · form/MantineNumberPickerInput.tsx

Overview#

Stepper-style number picker — NumberInput in picker mode with quick +/- controls.

Props — `ITextFieldDefinition & NumberInputProps`#

Common field props plus Mantine number-picker props.

Ref — `ITextField`#

Same as MantineTextField.

Example#

<MantineNumberPickerInput
  attribute="quantity"
  label="Quantity"
  min={1} max={100}
  defaultValue={1}
/>

MantinePinInput

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

MantinePinInput#

@palmyralabs/rt-forms-mantine · form/MantinePinInput.tsx

Overview#

Segmented one-character-per-cell input — OTPs, PINs, short verification codes.

Props — `IPinInputDefinition & PinInputProps`#

Common field props plus Mantine PinInputProps (length, type, mask, oneTimeCode, …).

Ref — `ITextField`#

Same as MantineTextField.

Example#

<MantinePinInput
  attribute="otp"
  label="Verification code"
  length={6}
  type="number"
  oneTimeCode
/>

MantineCheckBox

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

MantineCheckBox#

@palmyralabs/rt-forms-mantine · form/MantineCheckBox.tsx

Overview#

Boolean checkbox — Mantine Checkbox.

Props — `ICheckBoxDefinition & CheckboxProps`#

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

Ref — `ICheckBoxField`#

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

Example#

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

MantineSwitch

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

MantineSwitch#

@palmyralabs/rt-forms-mantine · form/MantineSwitch.tsx

Overview#

Toggle switch. Unlike MantineCheckBox, accepts a two-value options pair to store anything non-boolean (e.g. 'Y' / 'N', 'ACTIVE' / 'INACTIVE').

Props — `ISwitchDefinition & SwitchProps`#

Common field props plus Mantine SwitchProps and:

Prop	Type	Purpose
`options`	`{ onValue, offValue }?`	Values written to form data for on/off states

Ref — `ISwitchField`#

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

Example#

<MantineSwitch
  attribute="status"
  label="Active"
  options={{ onValue: 'ACTIVE', offValue: 'INACTIVE' }}
/>

MantineRadio

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

MantineRadio#

@palmyralabs/rt-forms-mantine · form/MantineRadio.tsx

Overview#

Single radio button. For grouped radios, use MantineRadioGroup.

Props — `IRadioDefinition & RadioProps`#

Common field props plus Mantine RadioProps (value, color, size, …).

Example#

<MantineRadio
  attribute="delivery"
  label="Standard shipping"
  value="STANDARD"
/>

MantineRadioGroup

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

MantineRadioGroup#

@palmyralabs/rt-forms-mantine · form/MantineRadioGroup.tsx

Overview#

Grouped radio buttons — an options array drives the list.

Props — `IRadioGroupDefinition & RadioGroupProps`#

Common field props plus:

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

Example#

<MantineRadioGroup
  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' },
  ]}
/>

MantineSelect

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

MantineSelect#

@palmyralabs/rt-forms-mantine · form/MantineSelect.tsx

Overview#

Single-select dropdown backed by a static options array. Use MantineServerLookup when options come from an API.

Props — `ISelectDefinition & SelectProps`#

Common field props plus:

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

Plus Mantine SelectProps (searchable, clearable, placeholder, …).

Example#

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

MantineMultiSelect

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

MantineMultiSelect#

@palmyralabs/rt-forms-mantine · form/MantineMultiSelect.tsx

Overview#

Multi-select chips. Same options shape as MantineSelect; the stored value is an array.

Props — `ISelectDefinition & MultiSelectProps`#

Common field props + options: Array<{ value, label }> + Mantine MultiSelectProps (maxValues, searchable, clearable, …).

Example#

<MantineMultiSelect
  attribute="tags"
  label="Tags"
  searchable clearable
  options={[
    { value: 'WHOLESALE', label: 'Wholesale' },
    { value: 'RETAIL',    label: 'Retail' },
    { value: 'VIP',       label: 'VIP' },
  ]}
/>

MantineSlider

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

MantineSlider#

@palmyralabs/rt-forms-mantine · form/MantineSlider.tsx

Overview#

Single-thumb horizontal slider.

Props — `ISliderDefinition & SliderProps`#

Common field props plus:

Prop	Type	Purpose
`labelName`	`string?`	Label rendered in the thumb tooltip

Plus Mantine SliderProps (min, max, step, marks, color, …).

Ref — `ISliderField`#

interface ISliderField {
  focus(): void;
  getValue(): number;
  setValue(v: number): void;
  isValid(): boolean;
}

Example#

<MantineSlider
  attribute="discountPercent"
  label="Discount"
  min={0} max={100} step={5}
  marks={[{ value: 25, label: '25%' }, { value: 50, label: '50%' }, { value: 75, label: '75%' }]}
/>

MantineRangeSlider

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

MantineRangeSlider#

@palmyralabs/rt-forms-mantine · form/MantineRangeSlider.tsx

Overview#

Two-thumb range slider — stores a [min, max] tuple.

Props — `ISliderDefinition & RangeSliderProps`#

Common field props + Mantine RangeSliderProps (min, max, step, minRange, marks, …).

Ref — `ISliderField`#

Same as MantineSlider.

Example#

<MantineRangeSlider
  attribute="priceRange"
  label="Price range"
  min={0} max={1000} step={10}
  defaultValue={[100, 500]}
/>

MantineRating

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

MantineRating#

@palmyralabs/rt-forms-mantine · form/MantineRating.tsx

Overview#

Star-rating input.

Props — `IRatingDefinition & RatingProps`#

Common field props plus Mantine RatingProps (count, fractions, color, size, …).

Example#

<MantineRating
  attribute="feedback"
  label="Feedback"
  count={5}
  fractions={2}
/>

MantineDateInput

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

MantineDateInput#

@palmyralabs/rt-forms-mantine · form/MantineDateInput.tsx

Overview#

Text-style date input with an inline popover calendar. Stores the value in serverPattern, renders it in displayPattern.

Props — `IDatePickerDefinition & DateInputProps`#

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 Mantine DateInputProps (minDate, maxDate, clearable, firstDayOfWeek, …).

Ref — `IDateField`#

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

Example#

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

MantineDatePickerInput

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

MantineDatePickerInput#

@palmyralabs/rt-forms-mantine · form/MantineDatePickerInput.tsx

Overview#

Button-style date picker that opens a drop-down calendar. Supports type="range" for date-range selection.

Props — `IDatePickerDefinition & DatePickerInputProps`#

Common field props plus serverPattern / displayPattern (see MantineDateInput) and all DatePickerInputProps (type: 'default' | 'multiple' | 'range', numberOfColumns, hideOutsideDates, …).

Ref — `IDateField`#

Same as MantineDateInput.

Example — single date#

<MantineDatePickerInput
  attribute="birthday"
  label="Birthday"
  serverPattern="YYYY-MM-DD"
  displayPattern="DD MMM YYYY"
/>

Example — date range#

<MantineDatePickerInput
  attribute="reportRange"
  label="Report period"
  type="range"
  serverPattern="YYYY-MM-DD"
/>

MantineDateTimePicker

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

MantineDateTimePicker#

@palmyralabs/rt-forms-mantine · form/MantineDateTimePicker.tsx

Overview#

Combined date + time picker.

Props — `IDateTimePickerDefinition & DateTimePickerProps`#

Common field props + serverPattern / displayPattern + Mantine DateTimePickerProps (withSeconds, timeInputProps, minDate, maxDate, …).

Ref — `IDateField`#

Same as MantineDateInput.

Example#

<MantineDateTimePicker
  attribute="startsAt"
  label="Starts at"
  serverPattern="YYYY-MM-DD HH:mm:ss"
  displayPattern="DD MMM YYYY HH:mm"
  withSeconds={false}
/>

MantineMonthInput

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

MantineMonthInput#

@palmyralabs/rt-forms-mantine · form/MantineMonthInput.tsx

Overview#

Month-only picker — renders a 12-cell year calendar.

Props — `IMonthInputDefinition & MonthPickerInputProps`#

Common field props + serverPattern / displayPattern + Mantine MonthPickerInputProps.

Ref — `IDateField`#

Same as MantineDateInput.

Example#

<MantineMonthInput
  attribute="reportMonth"
  label="Report month"
  serverPattern="YYYY-MM"
  displayPattern="MMMM YYYY"
/>

MantineTimeInput

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

MantineTimeInput#

@palmyralabs/rt-forms-mantine · form/MantineTimeInput.tsx

Overview#

Time-only input (HH:mm / HH:mm:ss). No displayPattern — the browser’s time picker handles presentation.

Props — `Omit<IDatePickerDefinition,'displayPattern'> & TimeInputProps`#

Common field props + serverPattern + Mantine TimeInputProps (withSeconds, step, …).

Ref — `IDateField`#

Same as MantineDateInput.

Example#

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

MantineServerLookup

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

MantineServerLookup#

@palmyralabs/rt-forms-mantine · form/MantineServerLookup.tsx

Overview#

Single- or multi-value lookup backed by a Wire store — debounced query by queryAttribute, stores idAttribute, displays labelAttribute / displayAttribute. Ideal for foreign-key pickers against master-data endpoints.

Props — `IServerLookupDefinition & Omit<AutocompleteProps, 'defaultValue'>`#

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

Plus Mantine AutocompleteProps (placeholder, size, maxDropdownHeight, …) except defaultValue.

MantineServerAutoComplete

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

MantineServerAutoComplete#

@palmyralabs/rt-forms-mantine · form/MantineServerAutoComplete.tsx

Overview#

Free-text field with server-suggested completions. Unlike MantineServerLookup, the final stored value is a string typed/selected by the user — suggestions guide without constraining.

Props — `IServerAutoCompleteDefinition & (AutocompleteProps & { onChange?(value, data) })`#

Common field props + queryOptions (same shape as MantineServerLookup) + Mantine AutocompleteProps with a custom onChange(value, data) that also receives the matched record.

Ref — `IServerLookupField`#

Same as MantineServerLookup.

Example#

<MantineServerAutoComplete
  attribute="cityName"
  label="City"
  queryOptions={{
    endPoint: '/mstCity',
    queryAttribute: 'name',
    labelAttribute: 'name',
    idAttribute: 'id',
  }}
  onChange={(value, record) => console.log('chose', value, record)}
/>

Forms on Palmyra

MantineTextField

MantineTextField#

Overview#

Props — ITextFieldDefinition & TextInputProps#

Ref — ITextField#

Example#

MantineTextArea

MantineTextArea#

Overview#

Props — ITextFieldDefinition & TextareaProps#

Ref — ITextField#

Example#

MantinePasswordField

MantinePasswordField#

Overview#

Props — ITextFieldDefinition & PasswordInputProps#

Ref — ITextField#

Example#

MantineNumberField

MantineNumberField#

Overview#

Props — ITextFieldDefinition & NumberInputProps#

Ref — ITextField#

Example#

MantineNumberPickerInput

MantineNumberPickerInput#

Overview#

Props — ITextFieldDefinition & NumberInputProps#

Ref — ITextField#

Example#

MantinePinInput

MantinePinInput#

Overview#

Props — IPinInputDefinition & PinInputProps#

Ref — ITextField#

Example#

MantineCheckBox

MantineCheckBox#

Overview#

Props — ICheckBoxDefinition & CheckboxProps#

Ref — ICheckBoxField#

Example#

MantineSwitch

MantineSwitch#

Overview#

Props — ISwitchDefinition & SwitchProps#

Ref — ISwitchField#

Example#

MantineRadio

MantineRadio#

Overview#

Props — IRadioDefinition & RadioProps#

Example#

MantineRadioGroup

MantineRadioGroup#

Overview#

Props — IRadioGroupDefinition & RadioGroupProps#

Example#

MantineSelect

MantineSelect#

Overview#

Props — ISelectDefinition & SelectProps#

Example#

MantineMultiSelect

MantineMultiSelect#

Overview#

Props — ISelectDefinition & MultiSelectProps#

Example#

MantineSlider

MantineSlider#

Overview#

Props — ISliderDefinition & SliderProps#

Ref — ISliderField#

Example#

MantineRangeSlider

MantineRangeSlider#

Overview#

Props — ISliderDefinition & RangeSliderProps#

Ref — ISliderField#

Props — `ITextFieldDefinition & TextInputProps`#

Ref — `ITextField`#

Props — `ITextFieldDefinition & TextareaProps`#

Ref — `ITextField`#

Props — `ITextFieldDefinition & PasswordInputProps`#

Ref — `ITextField`#

Props — `ITextFieldDefinition & NumberInputProps`#

Ref — `ITextField`#

Props — `ITextFieldDefinition & NumberInputProps`#

Ref — `ITextField`#

Props — `IPinInputDefinition & PinInputProps`#

Ref — `ITextField`#

Props — `ICheckBoxDefinition & CheckboxProps`#

Ref — `ICheckBoxField`#

Props — `ISwitchDefinition & SwitchProps`#

Ref — `ISwitchField`#

Props — `IRadioDefinition & RadioProps`#

Props — `IRadioGroupDefinition & RadioGroupProps`#

Props — `ISelectDefinition & SelectProps`#

Props — `ISelectDefinition & MultiSelectProps`#

Props — `ISliderDefinition & SliderProps`#

Ref — `ISliderField`#

Props — `ISliderDefinition & RangeSliderProps`#

Ref — `ISliderField`#

Props — `IRatingDefinition & RatingProps`#

Props — `IDatePickerDefinition & DateInputProps`#

Ref — `IDateField`#

Props — `IDatePickerDefinition & DatePickerInputProps`#

Ref — `IDateField`#

Props — `IDateTimePickerDefinition & DateTimePickerProps`#

Ref — `IDateField`#

Props — `IMonthInputDefinition & MonthPickerInputProps`#

Ref — `IDateField`#

Props — `Omit<IDatePickerDefinition,'displayPattern'> & TimeInputProps`#

Ref — `IDateField`#

Props — `IServerLookupDefinition & Omit<AutocompleteProps, 'defaultValue'>`#

Props — `IServerAutoCompleteDefinition & (AutocompleteProps & { onChange?(value, data) })`#

Ref — `IServerLookupField`#