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
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 |
|---|---|---|---|
| No data found. | |||
| 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.
|