Packages
phoenix_duskmoon
9.5.2
9.9.2
9.9.1
9.9.0
9.8.0
9.7.1
9.7.0
9.6.4
9.6.3
9.6.2
9.6.1
9.6.0
9.5.4
9.5.3
9.5.2
9.5.1
9.5.0
9.4.3
9.4.2
9.4.1
9.4.0
9.3.0
9.2.0
9.1.4
9.1.3
9.1.1
9.1.1-rc.1
retired
9.0.1
9.0.0-rc.3
9.0.0-rc.2
9.0.0-rc.1
8.0.0
7.2.1
7.2.0
7.1.3
7.1.2
7.1.1
6.3.2
6.3.1
6.3.0
6.2.0
6.1.3
6.1.2
6.1.1
6.1.0
6.0.10
6.0.9
6.0.8
6.0.7
6.0.6
6.0.5
6.0.4
6.0.3
6.0.2
6.0.1
6.0.0
5.2.0-beta.5
5.2.0-beta.4
5.2.0-beta.3
5.2.0-beta.2
5.2.0-beta.1
5.1.0
5.0.6
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
5.0.0
4.6.6
4.6.5
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.2
4.5.1
4.5.0
4.4.4
4.4.3
4.4.2
4.4.1
4.4.0
4.3.2
4.3.1
4.3.0
4.2.0
4.1.1
4.1.0
4.0.0
Duskmoon UI component library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
lib/phoenix_duskmoon/component/data_entry/radio.ex
defmodule PhoenixDuskmoon.Component.DataEntry.Radio do
@moduledoc """
Radio button component for single selection.
## Examples
<.dm_form for={@form} phx-submit="save">
<.dm_radio field={@form[:theme]} value="light" label="Light theme" />
<.dm_radio field={@form[:theme]} value="dark" label="Dark theme" color="secondary" />
<.dm_radio field={@form[:theme]} value="auto" label="Auto theme" size="lg" />
</.dm_form>
"""
use Phoenix.Component
import PhoenixDuskmoon.Component.DataEntry.Form, only: [dm_error: 1]
import PhoenixDuskmoon.Component.Helpers, only: [css_color: 1]
@doc """
Renders a radio button input.
## Examples
<.dm_radio field={@form[:theme]} value="light" label="Light" />
<.dm_radio name="size" value="sm" label="Small" />
"""
@doc type: :component
attr(:id, :any, default: nil, doc: "HTML id attribute")
attr(:name, :any, doc: "HTML name attribute for form submission")
attr(:value, :any, doc: "the radio button value")
attr(:field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form")
attr(:checked, :boolean, default: false, doc: "whether this radio option is selected")
attr(:label, :string, default: nil, doc: "text label displayed next to the radio button")
attr(:size, :string,
default: "md",
values: ["xs", "sm", "md", "lg", "xl"],
doc: "radio button size"
)
attr(:color, :string,
default: "primary",
values: ["primary", "secondary", "tertiary", "accent", "info", "success", "warning", "error"],
doc: "color variant"
)
attr(:helper, :string, default: nil, doc: "helper text displayed below the radio button")
attr(:errors, :list, default: [], doc: "list of error messages to display")
attr(:disabled, :boolean, default: false, doc: "disables the radio button")
attr(:class, :any, default: nil, doc: "additional CSS classes for the wrapper")
attr(:label_class, :any, default: nil, doc: "additional CSS classes for the label")
attr(:radio_class, :any, default: nil, doc: "additional CSS classes for the radio input")
attr(:horizontal, :boolean, default: false, doc: "horizontal layout (label beside input)")
attr(:state, :string,
default: nil,
values: [nil, "success", "warning"],
doc: "validation state (applies form-group-success/warning)"
)
attr(:rest, :global)
def dm_radio(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
assigns
|> assign(field: nil, id: assigns.id || field.id)
|> assign_new(:name, fn -> field.name end)
|> assign_new(:checked, fn -> field.value == assigns.value end)
|> dm_radio()
end
def dm_radio(assigns) do
assigns = assign(assigns, :color, css_color(assigns.color))
~H"""
<div class={["form-group", @horizontal && "form-group-horizontal", @disabled && "form-group-disabled", @errors != [] && "form-group-error", @state && "form-group-#{@state}", @class]} phx-feedback-for={@name}>
<label class={["flex items-center gap-2", !@disabled && "cursor-pointer"]}>
<input
type="radio"
name={@name}
id={@id}
value={@value}
checked={@checked}
disabled={@disabled}
aria-disabled={@disabled && "true"}
aria-invalid={@errors != [] && "true"}
aria-describedby={
(@errors != [] && @id && "#{@id}-errors") ||
(@helper && @errors == [] && @id && "#{@id}-helper")
}
class={[
"radio",
"radio-#{@size}",
"radio-#{@color}",
@radio_class
]}
{@rest}
/>
<span :if={@label} class={@label_class}>
{@label}
</span>
</label>
<span :if={@helper && @errors == []} id={@id && "#{@id}-helper"} class={["helper-text", @state && "helper-text-#{@state}"]}>{@helper}</span>
<div :if={@errors != []} id={@id && "#{@id}-errors"}>
<.dm_error :for={msg <- @errors}>{msg}</.dm_error>
</div>
</div>
"""
end
end