Current section

Files

Jump to
noora lib noora checkbox.ex
Raw

lib/noora/checkbox.ex

defmodule Noora.Checkbox do
@moduledoc """
An input checkbox.
## Example
```elixir
<.checkbox label="I agree to the terms" />
```
"""
use Phoenix.Component
import Noora.Icon
alias Phoenix.HTML.FormField
attr(:label, :string, required: true, doc: "The label of the checkbox.")
attr(:description, :string, default: nil, doc: "An optional description.")
attr(:indeterminate, :boolean, default: false, doc: "Whether the checkbox is indeterminate.")
attr(:disabled, :boolean, default: false, doc: "Whether the checkbox is disabled.")
attr(:id, :string, default: nil, doc: "The id of the checkbox.")
attr(:field, FormField, default: nil, doc: "A Phoenix form field.")
attr(:multiple, :boolean,
default: false,
doc: "Whether the checkbox is part of a multiple checkbox group."
)
def checkbox(%{field: %FormField{} = field} = assigns) do
assigns
|> assign(field: nil, id: assigns.id || field.id)
|> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
|> assign_new(:value, fn -> field.value end)
|> checkbox()
end
def checkbox(assigns) do
assigns =
assign_new(assigns, :checked, fn ->
Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
end)
~H"""
<div
id={@id}
class="noora-checkbox"
phx-hook="NooraCheckbox"
data-indeterminate={@indeterminate}
data-disabled={@disabled}
>
<label data-part="root">
<input data-part="hidden-input" />
<div data-part="control">
<div data-part="check"><.check /></div>
<div data-part="minus"><.minus /></div>
</div>
<div>
<span data-part="label">{@label}</span>
<span :if={@description} data-part="description">{@description}</span>
</div>
</label>
</div>
"""
end
end