Catalog Forms

<.dialog_value>

ConnieUI.Forms

HEEx
<div class="w-80">
  <ConnieUI.Forms.dialog_value id="catalog-dialog-value" value="DK50 0040 0440 1162 43" label="Edit bank details" edit={JS.push("bank:edit")} />
</div>

Variant matrix

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

Controls

:string
:string

What to show, already written out. Nil when blank.

:string
:string

Read after the value by a screen reader, naming what choosing it does.

Read, not edited: the value at full contrast in a read-only text box named by `placeholder`, which the keyboard reaches. `edit` is not offered. Without it, and without `edit`, the field is a disabled button.

: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

edit class

Docs

A value edited in a dialog rather than typed in place, drawn as a field. For a value with more structure than one box can hold, like a bank account: the field shows the value written out the way it will be printed, with a pencil, and choosing it runs `edit`, which is the host's to open a dialog with. The dialog writes the value back; this only shows it. Without `edit` it is a read-only field. Phrasing content only, so it sits inside a paragraph of a contract body without the HTML parser closing the paragraph around it. A button cannot be required, so an editable required field carries an invisible required input holding the value, which is what makes the browser refuse a submit and point here while the value is blank. The value wraps rather than truncates. Somebody is about to sign what this field says, so a long one (an IBAN and a BIC on a phone) has to be readable in full; an ellipsis would hide part of what they are agreeing to.
Attribute Type Default Description
id * :string
value :string nil
What to show, already written out. Nil when blank.
placeholder :string nil
edit {:struct, Phoenix.LiveView.JS} nil
Run on choosing the field. Without it the field is read-only.
label :string nil
Read after the value by a screen reader, naming what choosing it does.
invalid :boolean false
required :boolean false
readonly :boolean false
Read, not edited: the value at full contrast in a read-only text box named by `placeholder`, which the keyboard reaches. `edit` is not offered. Without it, and without `edit`, the field is a disabled button.
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 "inline-block max-w-full"
Replaces the default.