Packages
noora
0.82.3
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
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
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/toggle.ex
defmodule Noora.Toggle do
@moduledoc """
A toggle switch input.
## Example
```elixir
<.toggle label="Enable notifications" />
<.toggle />
```
"""
use Phoenix.Component
alias Phoenix.HTML.FormField
attr(:label, :string, default: nil, doc: "The label of the toggle.")
attr(:description, :string, default: nil, doc: "An optional description.")
attr(:checked, :boolean, default: false, doc: "Whether the toggle is checked.")
attr(:disabled, :boolean, default: false, doc: "Whether the toggle is disabled.")
attr(:id, :string, default: nil, doc: "The id of the toggle.")
attr(:name, :string, default: nil, doc: "The name of the toggle.")
attr(:field, FormField, default: nil, doc: "A Phoenix form field.")
attr(:tabindex, :integer, default: nil, doc: "Tabindex to add to the toggle control")
attr(:rest, :global, doc: "Additional attributes")
def toggle(%{field: %FormField{} = field} = assigns) do
assigns
|> assign(field: nil, id: assigns.id || field.id)
|> assign_new(:name, fn -> field.name end)
|> assign_new(:checked, fn ->
Phoenix.HTML.Form.normalize_value("checkbox", field.value)
end)
|> toggle()
end
def toggle(assigns) do
~H"""
<div
id={@id}
name={@name}
class="noora-toggle"
phx-hook="NooraToggle"
data-checked={@checked}
data-disabled={@disabled}
{@rest}
>
<label phx-update="ignore" id={@id <> "label"} data-part="root">
<input data-peer data-part="hidden-input" tabindex={@tabindex} />
<div
class="noora-toggle-control"
data-state={if @checked, do: "checked", else: "unchecked"}
data-disabled={@disabled}
data-part="control"
>
<div data-part="track">
<div data-part="thumb" />
</div>
</div>
<div :if={@label}>
<span data-part="label">{@label}</span>
<span :if={@description} data-part="description">{@description}</span>
</div>
</label>
</div>
"""
end
end