Packages
moon
2.80.2
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/lego/checkbox.ex
defmodule Moon.Lego.Checkbox do
@moduledoc "Simple checkbox with or without selected mark to be used anywhere. Some SVG inside. Renders as a span"
use Moon.StatelessComponent
@doc "Id to be given to the HTML tag"
prop(id, :string)
@doc "Data-testid attribute value"
prop(testid, :string)
@doc "Class to be given to the visible checkbox"
prop(class, :css_class)
@doc "If the checkbox has selected mark"
prop(is_selected, :boolean, from_context: :is_selected)
@doc "On_click event for the checkbox"
prop(on_click, :event)
def render(assigns) do
~F"""
<span
{=@id}
data-testid={@testid}
:on-click={@on_click}
aria-hidden="true"
aria-checked={(@is_selected && "true") || "false"}
class={
merge([
"flex w-4 h-4 items-center justify-center text-moon-16",
"transition-colors rounded-moon-s-xs text-goten shadow-trunks",
"moon-checked:bg-piccolo moon-checked:shadow-none cursor-pointer",
@class
]),
"shadow-[0_0_0_1px_inset]"
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
class={"transition-opacity", "opacity-0": !@is_selected}
>
<path
d="M3.5 7.47059L6.83333 11L12.5 5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
"""
end
end