Packages
moon
2.81.1
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/design/form/radio/button.ex
defmodule Moon.Design.Form.Radio.Button do
@moduledoc "Single component of the Radio, renders to a label"
use Moon.StatelessComponent, slot: "option"
alias Moon.Design.Form.Field.Label
alias Moon.Design.Form.Radio.Indicator
alias Surface.Components.Form.RadioButton
import Phoenix.HTML.Form, only: [input_value: 2]
@doc "Id to be given to the label tag"
prop(id, :string)
@doc "Data-testid attribute value"
prop(testid, :string)
@doc "Additional CSS classes for the label"
prop(class, :css_class)
@doc "Field name, surface-style"
prop(field, :atom, from_context: {Surface.Components.Form.Field, :field})
@doc "Form, surface-style"
prop(form, :form, from_context: {Surface.Components.Form, :form})
@doc "Making the radio selected, use it outside the form. In most cases is set by Radio component"
prop(is_selected, :boolean, from_context: :is_selected)
prop(on_click, :event, from_context: :on_click)
prop(value, :string, from_context: :value)
prop(disabled, :boolean, from_context: :disabled)
@doc "Label to be shown when no default slot is given"
prop(label, :string)
@doc "Size of the label"
prop(size, :string, values!: ~w(sm md lg), default: "md")
@doc "Inner content - put label & <Indicator/> here"
slot(default)
def render(assigns) do
~F"""
<Label
{=@id}
{=@testid}
{=@value}
{=@size}
class={merge(["flex gap-2 p-0", ["opacity-60": @disabled], @class])}
{=@on_click}
attrs={role: "radio", "aria-checked": "#{is_selected(assigns)}"}
>
<RadioButton
class="hidden"
{=@value}
opts={
disabled: @disabled
}
/>
<#slot context_put={is_selected: @is_selected || is_selected(assigns)}>
<Indicator is_selected={@is_selected || is_selected(assigns)} />
{@label}
</#slot>
</Label>
"""
end
defp is_selected(%{value: value, form: form, field: field}) do
"#{value}" == "#{input_value(form, field)}"
end
end