Lavash.LiveView.Components (Lavash v0.4.0-rc.3)

Copy Markdown View Source

Lavash form components with built-in optimistic updates.

These components combine Phoenix form patterns with Lavash's optimistic validation system. Import them into your LiveView or component:

import Lavash.LiveView.Components

Styling dependency: daisyUI

These components ship with hard-coded daisyUI classes (input input-bordered, select select-bordered, floating-label, etc.). Using them without daisyUI installed produces unstyled markup — the components still work, just look unstyled.

If you're not on daisyUI, copy these components into your own app and swap the class lists for your design system, or render the underlying HTML directly with the data-lavash-* attributes from Lavash.LiveView.Helpers. The lavash optimistic / validation machinery lives in those attributes, not the classes.

Input Component

The input/1 component renders a complete form field with:

  • Floating label (default) or traditional label-above-input
  • Optimistic validation styling (error classes when invalid)
  • Error messages with data-lavash-errors

Basic Usage

<.input field={@payment[:card_number]} label="Card number" />

With Custom Validation Field

When using extend_errors or custom validation logic:

<.input field={@payment[:cvv]} label="CVV"
        valid={@cvv_valid} valid_field="cvv_valid"
        errors={@payment_cvv_errors} />

All Options

<.input
  field={@form[:field]}           # Required: Phoenix.HTML.FormField
  label="Field Label"             # Required: Label text
  type="text"                     # Input type (default: "text")
  floating={true}                 # Floating label (default) or label above input
  valid={@field_valid}            # Validation state boolean
  valid_field="custom_valid"      # Custom valid field name for JS
  errors={@field_errors}          # Error list
  placeholder="Enter value"       # Input placeholder
  # ... any other HTML attributes passed through
/>

Non-floating Label

For traditional label-above-input layout:

<.input field={@form[:email]} label="Email" floating={false} />

Summary

Functions

input(assigns)

Renders a form input with floating label and optimistic validation.

select(assigns)

Renders a select dropdown with label and optimistic validation.

textarea(assigns)

Renders a textarea with floating label and optimistic validation.

Functions

input(assigns)

Renders a form input with floating label and optimistic validation.

Examples

<.input field={@payment[:card_number]} label="Card number" />

<.input field={@payment[:cvv]} label="CVV"
        valid={@cvv_valid} valid_field="cvv_valid"
        errors={@payment_cvv_errors}
        maxlength="4" inputmode="numeric" />

Attributes

  • field (Phoenix.HTML.FormField) (required) - The form field from @form[:field].
  • label (:string) (required) - The label text.
  • type (:string) - The input type. Defaults to "text".
  • valid (:boolean) - Validation state. If nil, derives from form_field_valid assign. Defaults to nil.
  • valid_field (:string) - Custom valid field name for JS (e.g., 'cvv_valid' instead of 'payment_cvv_valid'). Defaults to nil.
  • errors (:list) - Error list. If nil, derives from form_field_errors assign. Defaults to nil.
  • class (:string) - Additional CSS classes for the input. Defaults to nil.
  • wrapper_class (:string) - Additional CSS classes for the wrapper div. Defaults to nil.
  • floating (:boolean) - Whether to use floating label style (default) or traditional label-above-input. Defaults to true.
  • format (:string) - Input formatting: 'credit-card' (XXXX XXXX XXXX XXXX), 'expiry' (MM/YY). Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes for the input. Supports all globals plus: ["autocomplete", "disabled", "form", "inputmode", "list", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "size", "step"].

select(assigns)

Renders a select dropdown with label and optimistic validation.

Examples

<.select field={@form[:country]} label="Country" options={[{"US", "us"}, {"Canada", "ca"}]} />

<.select field={@form[:state]} label="State" options={us_states()} prompt="Select..." />

Attributes

  • field (Phoenix.HTML.FormField) (required) - The form field from @form[:field].
  • label (:string) (required) - The label text.
  • options (:list) (required) - List of {label, value} tuples for the options.
  • prompt (:string) - Optional prompt text for the first empty option. Defaults to nil.
  • valid (:boolean) - Validation state. If nil, derives from form_field_valid assign. Defaults to nil.
  • valid_field (:string) - Custom valid field name for JS. Defaults to nil.
  • errors (:list) - Error list. If nil, derives from form_field_errors assign. Defaults to nil.
  • class (:string) - Additional CSS classes for the select. Defaults to nil.
  • wrapper_class (:string) - Additional CSS classes for the wrapper div. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes for the select. Supports all globals plus: ["autocomplete", "disabled", "form", "required"].

textarea(assigns)

Renders a textarea with floating label and optimistic validation.

Same attributes as input/1 but renders a textarea.

Attributes

  • field (Phoenix.HTML.FormField) (required)
  • label (:string) (required)
  • valid (:boolean) - Defaults to nil.
  • valid_field (:string) - Defaults to nil.
  • errors (:list) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • wrapper_class (:string) - Defaults to nil.
  • floating (:boolean) - Defaults to true.
  • rows (:integer) - Defaults to 3.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["autocomplete", "disabled", "form", "maxlength", "minlength", "placeholder", "readonly", "required"].