Packages
moon
2.87.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/components/lego/radio.ex
defmodule Moon.Components.Lego.Radio do
@moduledoc false
use Moon.StatelessComponent
@doc "Is the radio button selected?"
prop(is_selected, :boolean, from_context: :is_selected)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes for the selected state"
prop(selected_class, :css_class)
@doc "Id attribute for the DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
def render(assigns) do
~F"""
<span class="flex w-6 h-6 justify-center items-center" {=@id} data-testid={@testid}>
<span class={
merge([
"block relative w-4 h-4 rounded-full",
(@is_selected && "shadow-piccolo") || "shadow-trunks",
@class
]),
"shadow-[0_0_0_1px_inset]"
}>
<span class={merge([
(@is_selected && "scale") || "scale-0",
"h-2 w-2 rounded-full absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] bg-piccolo transition-transform",
@selected_class
])} />
</span>
</span>
"""
end
end