Packages
corex
0.1.0-alpha.13
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
lib/form.ex
defmodule Corex.Form do
@moduledoc """
Helper functions to work with forms.
Corex form components such as `Corex.Checkbox` and `Corex.Select` with classic form and with Phoenix form using the `Phoenix.Component.form/1` function.
## Examples
### Classic Form
In a classic form, you can use the `name` attribute to identify the checkbox.
The generated parameters will be as follows: `/?terms=true`
This works in Controller View and Live View
```heex
<form id="my-form">
<.checkbox name="terms" class="checkbox">
<:label>I accept the terms</:label>
</.checkbox>
<button type="submit">Submit</button>
</form>
```
### Phoenix Form
In a Phoenix form, you can use the field attribute to identify the checkbox.
The generated parameters will be as follows: `/?terms=true`
> #### Required {: .neutral}
> You must use the `Corex.Form.get_form_id/1` function to get the form id and pass it to the form component.
#### In a Controller
```heex
<.form :let={f} for={@changeset} id={get_form_id(@changeset)}>
<.checkbox field={f[:terms]} class="checkbox">
<:label>I accept the terms</:label>
</.checkbox>
<button type="submit">Submit</button>
</.form>
```
#### In a Live View
> #### Required {: .neutral}
> - You must use the `Corex.Form.get_form_id/1` function to get the form id and pass it to the form component.
> - You must enable the controlled mode. This allows the Live View to be the source of truth and the component to be in sync accordingly
```heex
<.form for={@form} id={get_form_id(@form)}>
<.checkbox field={@form[:terms]} controlled class="checkbox">
<:label>I accept the terms</:label>
</.checkbox>
<button type="submit">Submit</button>
</.form>
```
"""
alias Phoenix.Component
alias Phoenix.HTML.Form
alias Ecto.Changeset
@doc """
Returns the form id.
Accepts either:
* an `Ecto.Changeset`
* a `Phoenix.HTML.Form`
## Examples
#### In a Controller
```heex
<.form :let={f} for={@changeset} id={get_form_id(@changeset)}>
<.checkbox field={f[:terms]} class="checkbox">
<:label>I accept the terms</:label>
</.checkbox>
<button type="submit">Submit</button>
</.form>
```
#### In a Live View
```heex
<.form for={@form} id={get_form_id(@form)}>
<.checkbox field={@form[:terms]} controlled class="checkbox">
<:label>I accept the terms</:label>
</.checkbox>
<button type="submit">Submit</button>
</.form>
```
"""
@spec get_form_id(Form.t() | Changeset.t()) :: binary()
def get_form_id(%Form{id: id}) when is_binary(id), do: id
def get_form_id(%Changeset{} = changeset) do
changeset
|> Component.to_form()
|> Map.fetch!(:id)
end
def get_form_id(other) do
raise ArgumentError,
"expected Ecto.Changeset or Phoenix.HTML.Form, got: #{inspect(other)}"
end
end