Attributes

• class (:string) - Defaults to "".
• variant (:string) - Defaults to "default". Must be one of "default", "secondary", "destructive", or "outline".

Slots

• inner_block

Renders form field error messages.

Displays validation errors below form inputs. Renders nothing when errors is empty. Each error paragraph is marked with role="alert" and aria-live="polite" so screen readers announce new errors as they appear. A deterministic id is generated from the id attribute (defaulting to "field-error") so callers can wire the input's aria-errormessage to it.

Examples

<.field_error errors={["can't be blank"]} />
<.field_error id="user_email-error" errors={["must be at least 3 characters", "is invalid"]} />
<.field_error errors={[]} />

Attributes

• id (:string) - id prefix for each error paragraph; suffixed with the error index. Defaults to "field-error".
• errors (:list) - Defaults to [].

Renders a progressbar with ARIA attributes for accessibility.

Examples

<.progress value={42} label="Upload progress" />
<.progress value={3} min={0} max={10} value_text="3 of 10 items" />
<.progress value={50} aria_labelledby="upload-label" />

Attributes

• min (:float) - Defaults to 0.0.
• max (:float) - Defaults to 100.0.
• value (:float) - Defaults to 0.0.
• label (:string) - accessible label for the progressbar. Defaults to nil.
• aria_labelledby (:string) - id of an element labelling the progressbar. Defaults to nil.
• value_text (:string) - human-readable value text announced by screen readers. Defaults to nil.
• class (:string) - Defaults to "".

Translates a form error tuple into a human-readable string.

Error tuples from changesets have the form {msg, opts} where msg may contain interpolation placeholders like %{count}.

Examples

iex> PUI.Components.translate_error({"can't be blank", []})
"can't be blank"

iex> PUI.Components.translate_error({"should be at least %{count} character(s)", [count: 3]})
"should be at least 3 character(s)"