ENGLISH·COURSE API
    Preparing search index...

    Function

    LearnerCardNameField

    • The learner card's name, written in place.

      Parameters

      Returns Element

      Goes in LearnerCard's nameField slot, where it replaces the name the card would otherwise print. It is styled to read as a field rather than as the card's own text — a resting dashed line, a caret, and a solid gold line on focus — because a card that only previewed the name sent learners clicking at text that could not answer.

      Both onboarding steps use it, so the card's name can be written on step 1 and corrected on step 2 without leaving the card.

      <LearnerCard
        name={name}
        avatar={avatar}
        level={level}
        nameField={
          <LearnerCardNameField
            label={t("name.fieldLabel")}
            placeholder={t("name.placeholder")}
            value={name}
            onChange={setName}
          />
        }
      />

    Settings

    Member Visibility