Data fields · Neptuno

Text and identifiers

Free text, case-normalized identifiers, and multiline notes. Identifiers stay strings so leading zeros survive.

`TextField`

Single-line text with the iOS L-shaped stroke, required/validated asterisks, helper and error text.

iOS

Field KRXCore-iOS/Source/UIUX/Views/Fields/Field.swift
EditField KRXCore-iOS/Source/UIUX/Views/Fields/EditField.swift

Interactive example

Legal name

States

Empty with placeholder

Filled with helper

Shown on invoices.

Required and invalid

This field is required.

Validated by the Backend

Disabled

Display only

Current value string

"Example Construction Co."

Usage

<TextField
  label="Legal name"
  icon="building"
  required
  bind:value={profile.legalName}
  error={errors.legalName}
/>

Platform differences

readonly maps to EditField with edit == false (stroke hidden, dimmed label).
Helper and error text are web additions; iOS fields have no inline validation.

`TextField (identifier)`

Identifiers such as RFC, CLABE, or internal codes: uppercase while typing, no autocorrect, kept as strings.

iOS

Field(sensitivity: .upper) iOS/Shared/Views/CorporateProfile/Form/CorporateProfileForm.swift

iOS has no dedicated identifier field; it configures the generic Field with a CaseFormatter.

Interactive example

RFC

Uppercase while typing.

Company ID

Leading zeros are preserved.

Current value object

{
  "rfc": "XAXX010101000",
  "companyId": "000123"
}

Usage

<TextField label="RFC" textCase="upper" maxlength={13} bind:value={company.rfc} />
<TextField label="Company ID" inputmode="numeric" bind:value={company.id} />

Platform differences

textCase ports CaseSensitivity (original, upper, lower) and keeps the caret in place.
Numeric-looking identifiers use inputmode="numeric" but never become numbers.

`TextAreaField`

Multiline descriptions and notes with an optional character counter.

iOS

Field iOS/Shared/Views/CorporateProfile/Form/CorporateProfileForm.swift

iOS uses the single-line Field for messages and notes; there is no multiline component.

Interactive example

Presentation message

53 / 280 characters

States

Empty

Disabled

Current value string

"Deliveries are received Monday to Friday, 9:00–17:00."

Usage

<TextAreaField label="Presentation message" maxlength={280} bind:value={profile.message} />

Platform differences

Grows with its content where the browser supports field-sizing: content.

Email and phone

Contact fields are text with the right keyboard and autofill hints. Phone numbers stay strings so + and leading zeros survive.

`TextField (type: email)`

Email with email keyboard, autofill, and no autocapitalization. Format checks are advisory; the Backend verifies.

iOS

Field + .keyboardType(.emailAddress) iOS/Shared/Views/Client/Form/ClientFormView.swift

iOS has no email component; forms set the keyboard type on the generic Field.

Interactive example

Email

States

Invalid email

Enter an email such as name@example.com.

Current value string

"billing@example.com"

Usage

<TextField type="email" label="Email" icon="mail" bind:value={contact.email} error={emailError} />

Platform differences

Uses type="email" and autocomplete="email" instead of a keyboard modifier.

`TextField (type: tel)`

Phone numbers as strings with the telephone keypad and autofill.

iOS

Field + .keyboardType(.phonePad) iOS/Shared/Views/Client/Form/ClientFormView.swift

iOS has no phone component; forms set the keyboard type on the generic Field.

Interactive example

Phone

Current value string

"+52 55 5555 0101"

Usage

<TextField type="tel" label="Phone" icon="phone" bind:value={contact.phone} />

Platform differences

No formatting mask is applied; numbers are stored exactly as typed.

Password

Secret text with a reveal toggle and password-manager hints.

`PasswordField`

Masked input with an accessible Show/Hide toggle (aria-pressed).

iOS

Field(isSecured: true) KRXCore-iOS/Source/UIUX/Views/Fields/Field.swift

iOS uses SecureField inside the generic Field; there is no dedicated password component.

Interactive example

New password

At least 12 characters.

States

Disabled

Current value string

""

Usage

<PasswordField label="New password" autocomplete="new-password" minlength={12} bind:value={password} />

Platform differences

The reveal toggle is web-only; iOS SecureField has no reveal action.
The catalog masks the inspected value; it is never logged or sent anywhere.

Numbers

Integers and decimals stay typed as numbers. Empty input is null, never zero, and intermediate text such as 12. is preserved while typing.

`NumberField (mode: integer)`

Whole numbers with the iOS plus/minus stepper. ArrowUp/ArrowDown step from the keyboard.

iOS

NumericField iOS/Shared/Views/Components/Fields/NumericField.swift
EditNumericField iOS/Shared/Views/Components/Fields/EditNumericField.swift

Interactive example

Headcount

States

Empty (null)

Out of range

Must be at most 500.

Disabled

Display only

Current value number

Usage

<NumberField label="Headcount" mode="integer" min={0} max={500} stepper bind:value={team.headcount} />

Platform differences

iOS decrements clamp at a hardcoded 0; the web stepper uses min/max.
iOS valueProxy drops invalid text silently; the web keeps the text and shows an error with value = null.

`NumberField (mode: decimal)`

Decimal input with a decimal keyboard and an optional limit on decimal places.

iOS

NumberField KRXCore-iOS/Source/UIUX/Views/Fields/Number/NumberField.swift

Interactive example

Area (m²)

Up to 2 decimal places.

States

Display only (es-MX)

Current value null

null

Usage

<NumberField label="Area" maxFractionDigits={2} bind:value={site.area}>
  {#snippet suffix()}<span>m²</span>{/snippet}
</NumberField>

Platform differences

Accepts . as the decimal separator; , and spaces are ignored as grouping.
Display-only mode formats with Intl.NumberFormat for the given locale.

Money and percentage

Money always carries an explicit ISO 4217 currency. Percentages document their storage scale.

`MoneyField`

Amount plus currency code. Decimal places follow the currency (MXN 2, JPY 0), and display mode formats with Intl.

iOS

NumberField(numberStyle: .currency) iOS/Shared/Views/Finances/Expense/AddExpenseView.swift

iOS has no money component: it uses the generic NumberField and hardcodes MXN in NumberFormatter.

Interactive example

Amount

States

Empty (null amount)

USD

JPY has no decimals

JPY

Display only (es-MX)

Display only (en-US)

Current value object

{
  "amount": 1234.5,
  "currency": "MXN"
}

Usage

<MoneyField
  label="Amount"
  currencies={['MXN', 'USD']}
  locale="es-MX"
  min={0}
  bind:value={expense.amount}
/>  <!-- { amount: number | null, currency: 'MXN' } -->

Platform differences

Amounts are JavaScript numbers in major units; exact minor-unit arithmetic stays in the Backend.
Switching currency keeps the amount and flags extra decimal places instead of rounding silently.

`PercentField`

Percent input shown in points (12.5 = 12.5 %), stored as points (0–100, the iOS convention) or as a fraction (0–1).

iOS

Field + .keyboardType(.decimalPad) iOS/Shared/Views/CorporateProfile/Form/CorporateProfileForm.swift

iOS has no percent component; CorporateProfileForm binds a text Field and clamps to 0…100.

Interactive example

Default wholesale discount

%

Tax rate (stored as fraction)

%

States

Above 100 %

%

Must be at most 100.

Display only

%

Current value object

{
  "points": 12.5,
  "fraction": 0.125
}

Usage

<PercentField label="Discount" bind:value={profile.discount} />            <!-- 12.5 -->
<PercentField label="Rate" scale="fraction" bind:value={tax.rate} />   <!-- 0.125 -->

Platform differences

min/max are in percent points and default to 0…100, like iOS.
iOS converts empty input to 0; the web returns null.

Dates and times

Plain dates (YYYY-MM-DD) and times (HH:mm) carry no timezone. Date/time values are UTC ISO 8601 instants edited in the viewer's timezone. Optional values are null until set.

`DateTimeField (kind: date)`

Required and optional calendar dates using the native date input.

iOS

EditDateField KRXCore-iOS/Source/UIUX/Views/Fields/Date/EditDateField.swift
DateTimePicker KRXCore-iOS/Source/UIUX/Views/Fields/Date/DateTimePicker.swift

Interactive example

Fiscal / legal date

Expected delivery

States

Invalid

Choose a date.

Disabled

Display only

Display only, empty

Current value object

{
  "fiscalDate": "2026-01-15",
  "expectedDelivery": null
}

Usage

<DateTimeField label="Fiscal date" kind="date" required bind:value={company.date} />
<DateTimeField
  label="Expected delivery"
  kind="date"
  emptyLabel="No expected delivery date yet"
  bind:value={project.expectedDelivery}
/>  <!-- '2026-01-15' | null -->

Platform differences

iOS opens wheel pickers in sheets from calendar/clock buttons; the web uses native inputs.
iOS parses yyyy-MM-dd with ISO8601DateFormatter and falls back to today; the web keeps plain dates exact.
Optional fields offer a Clear button, replacing the hidden DatePicker workaround in ProjectFormView.

`DateTimeField (kind: time | datetime)`

Wall-clock times and absolute date/time instants.

iOS

DateField KRXCore-iOS/Source/UIUX/Views/Fields/Date/DateTimeField.swift
DateTimePicker KRXCore-iOS/Source/UIUX/Views/Fields/Date/DateTimePicker.swift

Interactive example

Shift start

Client meeting

Times are in your local timezone.

States

Display only time

Current value object

{
  "shiftStart": "08:30",
  "meeting": "2026-10-09T16:30:00.000Z"
}

Usage

<DateTimeField label="Shift start" kind="time" bind:value={shift.start} />       <!-- '08:30' -->
<DateTimeField label="Meeting" kind="datetime" bind:value={event.startsAt} /> <!-- UTC ISO -->

Platform differences

datetime shows the viewer timezone under the field; stored values are UTC.
Display mode uses medium date / short time styles like the iOS DateFormatter.

Boolean toggle

On/off values rendered as an accessible switch.

`ToggleField`

The iOS pill toggle: off (✕) and on (✓) icons, knob sliding to the active side. Space or Enter toggles it; so does clicking the label.

iOS

PillToggleStyle KRXCore-iOS/Source/UIUX/Views/Toggle/PillToggleStyle.swift

Interactive example

Recurring expense

States

On

With helper

Applies to new invoices only.

Disabled

Display only

Single selection

Enums, categories, statuses, and units with a typed value or null.

`SelectField`

Native select inside the field chrome. Typed as the option union (`T | null`).

iOS

CasePicker KRXCore-iOS/Source/UIUX/Views/Fields/Case/CasePicker.swift
EditValuePicker KRXCore-iOS/Source/UIUX/Views/EditValuePicker.swift

Interactive example

States

Nothing chosen

Invalid

Choose a category.

Disabled

Display only

Current value object

{
  "category": "materials",
  "unit": "m2"
}

Usage

<SelectField
  label="Category"
  options={expenseCategories}  // SelectOption<ExpenseCategory>[]
  required
  bind:value={expense.category}
/>

Platform differences

iOS shows a wheel Picker in a bottom sheet; the web uses the native select (platform picker on mobile).
iOS stores the raw string; the web keeps the typed union and uses null for “not chosen”.

`SelectField (appearance: capsule)`

The compact ValuePicker look: title on the left, the value in a stroked capsule.

iOS

ValuePicker KRXCore-iOS/Source/UIUX/Views/Toggle/ValuePicker.swift

Interactive example

Priority

Current value null

null

Usage

<SelectField appearance="capsule" label="Priority" options={priorities} bind:value={project.priority} />

Platform differences

Same native select and keyboard behavior as the field appearance.

Related records

Reference another record by id. Options come from the caller; the catalog uses synthetic, local mock records only.

`RecordPickerField`

Searchable combobox. Type to filter (case- and accent-insensitive), ArrowDown/ArrowUp to move, Enter to select, Escape to close.

iOS

OptionsFieldLink iOS/Shared/Views/Components/Fields/OptionsFieldLink.swift
EditOptionsFieldLink iOS/Shared/Views/Components/Fields/EditOptionsFieldLink.swift
CardStringList iOS/Shared/Views/Card/CardStringList.swift

iOS has no single record picker: it shows the value in a field-like row and navigates to a .searchable list.

Interactive example

Client

States

Nothing selected

Required and invalid

Choose a client.

Display only

Puebla · Food service

Current value string

"client-002"

Usage

<RecordPickerField label="Client" options={clients} bind:value={project.clientId} />
<!-- options: { id, title, subtitle? }[]; value: string | null -->

Platform differences

Replaces push navigation with an inline ARIA combobox and listbox.
Remote search, paging, and loading states will need an API contract; none is implied here.

Address and location

Structured postal addresses and geographic coordinates.

`AddressField`

Street, numbers, neighborhood, postal code, city, state, and country as separate strings with autofill tokens.

iOS

Field × 6 iOS/Shared/Views/CorporateProfile/Form/CorporateProfileForm.swift

iOS has no address component; CorporateProfileForm stacks Fields in Address and Location cards.

Interactive example

Fiscal address

Street / avenue

Number

Interior number

Neighborhood

Postal code

City

State

Country code

Current value object

{
  "street": "Avenida Ejemplo",
  "exteriorNumber": "123",
  "interiorNumber": "",
  "neighborhood": "Centro",
  "postalCode": "01000",
  "city": "Ciudad de México",
  "state": "CDMX",
  "country": "MX"
}

Usage

<AddressField label="Fiscal address" required bind:value={company.address} errors={addressErrors} />

Platform differences

Postal codes are strings so 01000 keeps its leading zero.
Address validation and geocoding are not implemented; they need a provider decision.

`LocationField`

Latitude/longitude with range validation and an optional “Use current location” action.

iOS

MapPicker iOS/Shared/Views/Maps/MapPicker.swift
MapLocationPickerSheet iOS/Shared/Views/Maps/MapPicker.swift

Interactive example

Site location

19.43260, -99.13320 Map preview needs a map provider (not connected).

Latitude

Longitude

States

No location yet

No location set yet. Map preview needs a map provider (not connected).

Latitude

Longitude

Current value object

{
  "latitude": 19.4326,
  "longitude": -99.1332
}

Usage

<LocationField label="Site location" bind:value={project.location} />
<!-- { latitude: number, longitude: number } | null -->

Platform differences

Implemented: manual coordinates and the browser Geolocation API (permission prompt).
Native only / pending provider: MapKit tiles, drag-to-pick, place search, and Open in Maps.
iOS adds a hardcoded default coordinate when enabling a location; the web starts empty.

Images and documents

Local file selection with previews. Files stay in this browser tab: nothing is uploaded, persisted, or sent to a service.

`ImageField`

Image picker with a 140 px preview, drag and drop, paste, size/type checks, and a stored-image fallback.

iOS

CompanyLogoEditorView KRXCore-iOS/Source/UIUX/Views/Media/CompanyLogoEditorView.swift

Interactive example

Company logo

Replace image

Or drag an image here, or paste one with Ctrl+V / ⌘V.

Current stored image

States

No image yet

Choose image

Or drag an image here, or paste one with Ctrl+V / ⌘V.

Display only

Current stored image

Current value null

null

Usage

<ImageField
  label="Company logo"
  src={profile.companyLogoUrl}
  bind:value={logoFile}
/>  <!-- File | null; upload is the caller's job -->

Platform differences

One native picker covers iOS Gallery and Files; mobile browsers offer the photo library and camera there.
Paste works with Ctrl+V / ⌘V while the picker is focused, instead of a Paste button.
Upload and storage are pending integrations; the preview uses a local object URL.

`DocumentField`

Document picker that previews metadata: name, type, size, and last modified.

iOS

No iOS equivalent: iOS forms only import images (CompanyLogoEditorView) and share generated PDFs. Web-first component.

Interactive example

Signed contract

No document selected.

Choose document

Accepted: .pdf, .doc, .docx, .xls, .xlsx, .csv, .txt. Up to 10 MB.

States

Required and invalid

No document selected.

Choose document

Accepted: .pdf, .doc, .docx, .xls, .xlsx, .csv, .txt. Up to 10 MB.

Attach the contract.

Disabled

No document selected.

Choose document

Accepted: .pdf, .doc, .docx, .xls, .xlsx, .csv, .txt. Up to 10 MB.

Current value null

null

Usage

<DocumentField label="Signed contract" accept=".pdf" bind:value={contractFile} />

Platform differences

The file is not read, uploaded, or persisted; only browser-provided metadata is shown.
Upload, virus scanning, and storage need a Backend contract (pending).

Collections

Ordered lists of strings or related records.

`StringListField`

Editable list of strings with add and remove. Focus moves to the new item, or to the next one after removal.

iOS

Field + ForEach (General notes) iOS/Shared/Views/CorporateProfile/Form/CorporateProfileForm.swift

iOS has no list component; CorporateProfileForm renders one Field per note and an “Add note” button.

Interactive example

General notes

Note #1
Note #2

States

Empty

No tags yet.

Current value array

[
  "Payment due within 30 days.",
  "Prices include delivery inside the city."
]

Usage

<StringListField
  label="General notes"
  itemLabel={(i) => `Note #${i + 1}`}
  addLabel="Add note"
  bind:value={profile.generalNotes}
/>

Platform differences

iOS cannot remove notes from the form; the web adds a Remove action per item.

`RecordListField`

Related records as removable chips, added through the same searchable combobox.

iOS

EmployeeSelector iOS/Shared/Views/HHRR/List/EmployeeSelector.swift

Interactive example

Project team

Ana Ejemplo EMP-0007 · Project manager
Carla Prueba EMP-0018 · Architect

States

Empty

No records added yet.

Display only

Bruno Muestra EMP-0012 · Site supervisor
Elena Demo EMP-0031 · Accountant

Current value array

[
  "emp-0007",
  "emp-0018"
]

Usage

<RecordListField label="Project team" options={employees} bind:value={project.teamIds} />
<!-- value: string[] of record ids -->

Platform differences

iOS toggles selection circles in a pushed list and confirms; the web edits inline.
Already-selected records are excluded from the search results.

Display only

Read-only label/value pairs for detail screens. Every editable field above also supports readonly.

`ValueLabel`

Title above a value on the field surface, with an optional copy action.

iOS

ValueLabel KRXCore-iOS/Source/UIUX/Views/ValueLabel.swift
KeyValueView KRXCore-iOS/Source/UIUX/Views/Toggle/KeyValueView.swift
CopyLabelButton KRXCore-iOS/Source/UIUX/Views/Fields/CopyLabelButton.swift

Interactive example

RFC

XAXX010101000

Legal name

Example Construction Co.

States

Completion

No completion date yet

Current value string

"XAXX010101000"

Usage

<ValueLabel label="RFC" value={company.rfc} icon="hash" copyable />
<ValueLabel variant="key-value" label="Completion" value="" emptyLabel="No completion date yet" />

Platform differences

Copy uses the async Clipboard API, which requires a secure context (HTTPS or localhost).