Renders a form error summary with optimistic updates.

This component displays a summary of all form errors at the top of the form. Only shown after form submission if there are errors. The JS hook dynamically populates this with all field errors.

Examples

# Basic usage - shows all errors for the registration form
<.error_summary form={:registration} />

# With custom class
<.error_summary form={:registration} class="alert alert-error p-4" />

Attributes

• form (:atom) (required) - The form name (e.g., :registration).
• class (:string) - CSS class for the summary container. Defaults to "alert alert-error text-sm mb-4".
• Global attributes are accepted. Additional HTML attributes.

Renders form field errors with optimistic updates.

This component displays error messages from auto-generated *_errors fields. Errors are only shown after the field has been touched (blur) or form submitted.

Examples

# Basic usage - shows errors from registration_name_errors
<.field_errors form={:registration} field={:name} errors={@registration_name_errors} />

# With custom class
<.field_errors form={:registration} field={:age} errors={@registration_age_errors} class="text-sm text-error" />

Attributes

• form (:atom) (required) - The form name (e.g., :registration).
• field (:atom) (required) - The field name (e.g., :name).
• errors (:list) (required) - The errors list from assigns (e.g., @registration_name_errors).
• class (:string) - CSS class for error messages. Defaults to "text-error text-sm".
• Global attributes are accepted. Additional HTML attributes.

Renders a form field status indicator with optimistic updates.

This component displays a small icon inside an input field indicating the validation state (valid, invalid, or neutral). Use this inside an input wrapper with relative positioning.

Examples

# Basic usage inside a positioned wrapper
<div class="relative">
  <input type="text" ... />
  <.field_status form={:registration} field={:name} valid={@registration_name_valid} />
</div>

# The indicator is positioned at the right side of the input

Attributes

• form (:atom) (required) - The form name (e.g., :registration).
• field (:atom) (required) - The field name (e.g., :name).
• valid (:boolean) (required) - Whether the field is valid (client validation).
• valid_field (:string) - Custom valid field name for JS. Defaults to nil.
• class (:string) - CSS class for positioning. Defaults to "absolute right-3 top-1/2 -translate-y-1/2 text-lg pointer-events-none".
• Global attributes are accepted. Additional HTML attributes.

Renders form field success indicator with optimistic updates.

This component displays a success message when the field is valid. Only shown after the field has been touched (blur) or form submitted.

Examples

# Basic usage
<.field_success form={:registration} field={:name} valid={@registration_name_valid} />

# With custom message
<.field_success form={:registration} field={:email} valid={@registration_email_valid} message="Valid email!" />

Attributes

• form (:atom) (required) - The form name (e.g., :registration).
• field (:atom) (required) - The field name (e.g., :name).
• valid (:boolean) (required) - The valid state from assigns.
• valid_field (:string) - Custom valid field name for JS (defaults to form_field_valid). Defaults to nil.
• message (:string) - Success message to display. Defaults to "Looks good!".
• class (:string) - CSS class for success message. Defaults to "text-success text-sm".
• Global attributes are accepted. Additional HTML attributes.

Renders a Lavash component with automatic state hydration and binding resolution.

Works from both LiveViews and Components. Handles:

• Initial state injection from parent's component states
• Binding resolution (bind prop) with client-side chain resolution
• Parent CID injection for server-side binding propagation (when myself is present)
• current_user inheritance for actor-based authorization

From a LiveView

<.lavash_component
  module={ProductCard}
  id={"product-#{product.id}"}
  product={product}
  bind={[selected: :roast]}
/>

From a Component (pass myself for binding propagation)

<.lavash_component
  module={CounterControls}
  id="controls"
  bind={[count: :count]}
  count={@count}
  myself={@myself}
/>

Builds the optimistic state map from assigns based on DSL metadata.

Collects all state fields and derives marked with optimistic: true and extracts their current values from assigns. For async derives, unwraps the {:ok, value} tuple to get the raw value.

Example

# In your LiveView module
state :count, :integer, from: :url, default: 0, optimistic: true
state :multiplier, :integer, from: :ephemeral, default: 2, optimistic: true

calculate :doubled, rx(@count * @multiplier)

# In render/1
def render(assigns) do
  assigns = assign(assigns, :optimistic_state, optimistic_state(__MODULE__, assigns))
  # ...
end

Renders an element with conditional visibility based on boolean state.

This component generates a wrapper element with data-lavash-visible attribute, which the JS hook uses to show/hide the element by toggling the hidden class.

Examples

# Simple usage - visible when @is_logged_in is true
<.visible field={:is_logged_in} when={@is_logged_in}>
  Welcome back!
</.visible>
# Outputs: <div data-lavash-visible="is_logged_in">Welcome back!</div>

# With custom tag
<.visible field={:has_errors} when={@has_errors} tag="span">
  There are errors
</.visible>
# Outputs: <span data-lavash-visible="has_errors">There are errors</span>

# With additional attributes
<.visible field={:show_advanced} when={@show_advanced} class="mt-4 p-4 bg-gray-100">
  Advanced settings...
</.visible>

# Initially hidden (server render matches client behavior)
<.visible field={:show_details} when={false}>
  Details content
</.visible>
# Outputs: <div data-lavash-visible="show_details" class="hidden">Details content</div>

Attributes

• field (:atom) (required) - The boolean state field name.
• when (:boolean) (required) - The current boolean value from assigns.
• tag (:string) - The HTML tag to use (default: div). Defaults to "div".
• Global attributes are accepted. Additional HTML attributes.

Slots

• inner_block (required) - Content to show/hide.