Forms

<.pp_card class="w-full max-w-sm">
  <:title>Sign in</:title>
  <.form for={@form} id="login-form" phx-change="validate" phx-submit="login" class="mt-4 flex flex-col gap-4">
    <.pp_text_field field={@form[:email]} type="email" label="Email" autocomplete="username" />
    <.pp_password_field field={@form[:password]} label="Password" autocomplete="current-password" />
    <.pp_checkbox field={@form[:remember_me]} label="Keep me signed in" />
    <div class="flex items-center justify-between gap-2">
      <.pp_button variant="text" navigate={~p"/users/reset-password"}>Forgot password?</.pp_button>
      <.pp_button type="submit" phx-disable-with="Signing in...">Sign in</.pp_button>
    </div>
  </.form>
</.pp_card>

# In the LiveView: an ordinary changeset-backed form
def mount(_params, _session, socket) do
  {:ok, assign(socket, :form, to_form(Accounts.change_user_login(%User{})))}
end

def handle_event("validate", %{"user" => params}, socket) do
  changeset = Accounts.change_user_login(%User{}, params)
  {:noreply, assign(socket, :form, to_form(changeset, action: :validate))}
end

<.pp_text_field variant="outlined" label="Outlined (default)" name="outlined" />
<.pp_text_field variant="filled" label="Filled" name="filled" />
<.pp_text_field label="With an error" name="error" value="not-an-email" errors={["is not a valid email"]} />
<.pp_text_field color="secondary" label="Secondary" name="color_secondary" />

<.pp_text_field label="Amount" name="amount" value="42.00">
  <:start_adornment>$</:start_adornment>
  <:end_adornment>USD</:end_adornment>
</.pp_text_field>

<.pp_text_field label="Search" name="q">
  <:start_adornment><.pp_icon name="hero-magnifying-glass" size="sm" /></:start_adornment>
</.pp_text_field>

<.pp_text_field multiline rows={3} label="Bio" name="bio" />

<%!-- Input chips inside the field: pass :chips only when there are some --%>
<.pp_text_field id="to" name="q" label="To">
  <:chips :if={@recipients != []}>
    <.pp_chip
      :for={r <- @recipients}
      variant="input"
      deletable
      on_delete={JS.push("remove_recipient", value: %{name: r})}
    >
      {r}
    </.pp_chip>
  </:chips>
</.pp_text_field>

<.pp_password_field field={@form[:password]} label="Password" autocomplete="current-password" />
<.pp_password_field name="new_password" label="New password" variant="filled" supporting_text="At least 12 characters" />

<.pp_select
  label="Country"
  name="country"
  prompt="Choose one"
  options={["Canada", "Mexico", "United States"]}
/>
<.pp_select
  variant="filled"
  label="Country"
  name="country_filled"
  prompt="Choose one"
  options={["Canada", "Mexico", "United States"]}
/>

<.pp_number_field field={@form[:quantity]} label="Quantity" min={0} max={10} />
<.pp_number_field label="Amount" name="amount" step={0.5} variant="filled" />

<.pp_checkbox label="Paperized (default)" checked={true} />
<.pp_checkbox paperize={false} label="paperize: false" />

<.pp_switch label="Notifications" checked={true} name="notifications" />

<%!-- System / Light / Dark, System selected by default --%>
<.pp_theme_toggle />

<%!-- With visible text next to it --%>
<.pp_theme_toggle label="Theme" />

<%!-- Also save the choice server-side: receives %{"theme" => "dark"} --%>
<.pp_theme_toggle on_toggle={JS.push("save_theme")} />

<.pp_radio_group
  label="Size"
  name="size"
  value="md"
  options={[{"Small", "sm"}, {"Medium", "md"}, {"Large", "lg"}]}
/>

<.pp_slider name="volume" label="Volume" value={60} />
<.pp_slider name="volume_md" label="Medium track" value={60} size="md" />
<.pp_slider name="volume_no_track" label="track: none" value={60} track="none" />

<%!-- discrete, evenly-spaced marks --%>
<.pp_slider name="volume_marks" label="Discrete (marks)" value={40} step={20} marks={true} />

<%!-- custom labeled marks --%>
<.pp_slider
  name="temperature"
  label="Temperature"
  value={30}
  max={100}
  marks={[{0, "0°C"}, {50, "50°C"}, {100, "100°C"}]}
/>

<%!-- range slider: a {low, high} tuple instead of a single number --%>
<.pp_slider name="price" label="Price range" value={{20, 80}} />

<.pp_slider name="volume_vertical" orientation="vertical" value={60} />
<.pp_slider name="volume_disabled" label="Disabled" value={30} disabled />

<.live_component
  module={PhoenixPaper.DatePicker}
  id="due-on"
  field={@form[:due_on]}
  label="Due date"
  min={Date.utc_today()}
/>

<.live_component module={PhoenixPaper.DatePicker} id="starts-on" field={@form[:starts_on]} label="Start date" variant="modal" />

<%!-- A date range: submitted as stay_start / stay_end --%>
<.live_component module={PhoenixPaper.DatePicker} id="stay" name="stay" label="Stay" range />

<.live_component module={PhoenixPaper.TimePicker} id="starts-at" field={@form[:starts_at]} label="Start time" />

<.live_component module={PhoenixPaper.TimePicker} id="ends-at" field={@form[:ends_at]} label="End time" hour_cycle={24} />

<.form for={@form} id="address-form" phx-change="validate">
  <.live_component
    module={PhoenixPaper.Autocomplete}
    id="country"
    field={@form[:country]}
    label="Country"
    options={[{"Canada", "ca"}, {"México", "mx"}, {"United States", "us"}]}
  />
</.form>

<%!-- Outside a form: on_change runs in the LiveView process --%>
<.live_component
  module={PhoenixPaper.Autocomplete}
  id="country-filter"
  name="country"
  label="Country"
  options={@countries}
  on_change={fn value -> send(self(), {:country_picked, value}) end}
/>

<%!-- Several values as input chips; drop the "" sentinel when casting --%>
<.live_component
  module={PhoenixPaper.Autocomplete}
  id="tags"
  field={@form[:tags]}
  label="Tags"
  options={@all_tags}
  multiple
/>

<.form for={@form} id="photos-form" phx-change="validate" phx-submit="save">
  <.pp_upload upload={@uploads.photos} on_cancel="cancel_upload" supporting_text="JPG or PNG, up to 8 MB" />
  <.pp_button type="submit">Upload</.pp_button>
</.form>

# In the LiveView
def mount(_params, _session, socket) do
  {:ok, allow_upload(socket, :photos, accept: ~w(.jpg .png), max_entries: 3)}
end

def handle_event("cancel_upload", %{"ref" => ref}, socket),
  do: {:noreply, cancel_upload(socket, :photos, ref)}