ElvixLanguages

Single-frame wizard for spoken languages and CEFR proficiency, capped at 8 with tap-to-edit and delete-confirm.

app/account/languages/page.tsx

"use client";

import { ElvixLanguages } from "@elvix.is/sdk/react";

export default function LanguagesPane() {
  return (
    <ElvixLanguages
      onChange={(languages) => {
        // Optional: mirror to local state for sibling panes. The SDK already persisted.
        console.log("languages now:", languages.length);
      }}
      onResult={(r) => {
        if (!r.ok) return console.warn(r.error, r.message);
        // r.count is the new total (0 to 8).
      }}
    />
  );
}

Props

Prop	Type	Required	Default	Description
`height`	`number`	optional	`min(540px, 66dvh)`	Fixed pixel height for the `<ElvixCard>` frame.
`minHeight`	`number`	optional	`340`	Minimum pixel height when `height` is unset.
`maxHeight`	`number`	optional	`700`	Maximum pixel height when `height` is unset.
`width`	`number \| string`	optional	`"100%"`	Frame width. Numbers are pixels; strings pass through as CSS.
`onChange`	`(languages: LanguageRecord[]) => void`	optional	`—`	Fires whenever the underlying record set changes (add, edit level, delete). Receives the full list.
`onResult`	`(r: ElvixLanguagesResult) => void`	optional	`—`	Terminal save callback. Success payload is minimal (`{ ok: true, count }`); failure is `{ ok: false, error, message? }`.

The picker hides itself the moment the user hits 8 entries. If you see the add affordance disappear in QA, that is the cap doing its job, not a bug. To free a slot, the user taps an existing row and uses the in-frame delete-confirm.

Translated (0.14+)

Everything reads in the <ElvixProvider locale> language: language names come from Intl.DisplayNames ("Deutsch", "allemand", "ドイツ語"), the four level labels and their hints come from the SDK catalog in all fifteen locales, and the picker searches the translated name, the English name, the endonym and the code. Hosts that list a user's languages should use the editor's own words: useElvixLanguageNames() returns each language's name, and useElvixLanguageLevelLabel(level) returns the level ("ELEMENTARY" | "INTERMEDIATE" | "PROFICIENT" | "NATIVE") in the SDK's locale.

onResult.count is intentionally the only success field, so the host never receives the full language list as a side-channel. Subscribe to onChange if you need the records for sibling panes.

ElvixRegion

Single-frame wizard for the user's regional preferences singleton: country cascade plus tap-to-edit on every derived field.

Read

ElvixIdentityForm

Identity editor: given name (required), family name, birthdate, gender and pronouns (all optional). Saves only what changed, straight to the elvix User record.