Catalog Forms

<.identity_number>

ConnieUI.Forms

HEEx 
<div class="w-80">
  <ConnieUI.Forms.identity_number field={@field} />
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string

A named input elsewhere on the page to mirror the stored value into.

:string

The country to suggest while the field is unanswered, e.g. where the connection comes from. Without one the element falls back to a region named in the browser's languages. Either way it is only a pick in the country list, and nothing is stored until a number is typed.

Overrides the field's own errors, for a caller with no changeset behind the field.

Unusable. Nothing is rendered that holds the stored value, not even hidden: a disabled control shows `shown` and nothing else.

Read, not filled in: shows `shown` and nothing else, as `disabled` does, but at full contrast, reachable by the keyboard and announced as read-only with its country. For a number somebody is shown, such as one they are agreeing to.

:string

What a disabled or read-only control shows. Whoever reads the page source has it too.

:string

The id of an `identity_number_picker/1` rendered once elsewhere on the page. The country list is most of this control's markup, and a page that redraws the control's surroundings on every keystroke (a contract body does) would otherwise send all of it every time. With a picker the element copies the list in once, under its own ids, and reads the country codes and masks off the picker too. Without one the list, the codes and the masks are rendered inline.

:string
:string

`"signer"` draws the control the way a sign page marks a field somebody has to fill in: the green ring `ConnieUI.ContractEditor`'s older tags carry. Only for a document being signed; inside the app the neutral ring is right.

Set by the example

field class

Docs

A national identity number: the country that issued it, then the number, in one control shaped like `money/1`. The country is the same inline combo box, flag and code, and it decides what the number is called, the format the input holds it to, and which keyboard a phone offers. The number is masked with Maskito from a per-country mask the host supplies through `ConnieUI.SocialSecurity.Adapter`: separators are inserted as the number is typed, and a character no position can take is refused and announced. The mask is lenient in the way GOV.UK's pattern for National Insurance numbers asks for: spaces, punctuation and lower case, typed or pasted, are dropped or raised rather than refused. What the mask produces is only ever the shape; the host still validates the number itself. The placeholder is what the picked country calls its number, in the language being rendered, like any other input's placeholder. Separators appear as the number is typed past them: a CPR number's dash arrives with its seventh digit. An incomplete or invalid number stops the form being submitted, through the browser's own validation, so pressing the button is enough to be told. A number shorter than any complete one is caught in the browser at once; whether a complete-looking number is valid is the host's answer (`error/1`), rendered onto the element after each change, and only trusted while it is still about the value in the field. The field holds the country and the number together, `DK:0101801234`, the one value a SmartTag stores. `input_name` mirrors it into a named input elsewhere on the page through `data-input-name`, which is how the contract editor's inputs reach their hidden form fields. Everything inside is rendered into a `<template>` that the element copies into place when it connects. The contract editor puts this control inside a paragraph, and a `<div>` there makes the HTML parser close the paragraph around it; a template's content is parsed apart from the page, so it does not. The element resets `white-space` for the same reason. A contract paragraph is `break-spaces`, so that tabs and runs of spaces in a document keep their width, and that setting is inherited: every newline and indent between the tags of this markup would otherwise render as a blank line, stretching the control, and its country list, to many times their height.
Attribute Type Default Description
field * {:struct, Phoenix.HTML.FormField}
The stored value, country and number together.
input_name :string nil
A named input elsewhere on the page to mirror the stored value into.
default_country :string nil
The country to suggest while the field is unanswered, e.g. where the connection comes from. Without one the element falls back to a region named in the browser's languages. Either way it is only a pick in the country list, and nothing is stored until a number is typed.
invalid :boolean nil
Overrides the field's own errors, for a caller with no changeset behind the field.
disabled :boolean false
Unusable. Nothing is rendered that holds the stored value, not even hidden: a disabled control shows `shown` and nothing else.
readonly :boolean false
Read, not filled in: shows `shown` and nothing else, as `disabled` does, but at full contrast, reachable by the keyboard and announced as read-only with its country. For a number somebody is shown, such as one they are agreeing to.
shown :string nil
What a disabled or read-only control shows. Whoever reads the page source has it too.
picker :string nil
The id of an `identity_number_picker/1` rendered once elsewhere on the page. The country list is most of this control's markup, and a page that redraws the control's surroundings on every keystroke (a contract body does) would otherwise send all of it every time. With a picker the element copies the list in once, under its own ids, and reads the country codes and masks off the picker too. Without one the list, the codes and the masks are rendered inline.
size :string "sm"
sm | md
tone :string "default"
`"signer"` draws the control the way a sign page marks a field somebody has to fill in: the green ring `ConnieUI.ContractEditor`'s older tags carry. Only for a document being signed; inside the app the neutral ring is right. default | signer
class :any "block"
Replaces the default, rather than adding to it.
rest :global