Packages
mbta_metro
0.0.6
1.1.2
1.1.1
1.1.0
1.0.1
1.0.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
0.0.65
0.0.64
0.0.62
0.0.61
0.0.60
0.0.58
0.0.57
0.0.56
0.0.55
0.0.54
0.0.53
0.0.52
0.0.51
0.0.50
0.0.49
0.0.48
0.0.47
0.0.46
0.0.45
0.0.44
0.0.43
0.0.42
0.0.41
0.0.40
0.0.39
0.0.34
0.0.30
0.0.27
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
0.0.11
0.0.10
0.0.9
0.0.8
0.0.7
0.0.6
0.0.5
0.0.4
0.0.3
0.0.2
0.0.1
0.0.1-alpha
A Phoenix LiveView component library
Current section
Files
Jump to
Current section
Files
lib/mbta_metro/components/input_group.ex
defmodule MbtaMetro.Components.InputGroup do
@moduledoc false
use Phoenix.Component
import MbtaMetro.Components.Input, only: [input: 1]
attr :type, :string, values: ~W(checkbox radio)
attr :field, Phoenix.HTML.FormField,
required: true,
doc: "a form field struct retrieved from the form, for example: @form[:color]"
attr :rest, :global
slot :inputs, doc: "Inputs to render as a list" do
attr :id, :string
attr :label, :string, doc: "The label displayed. The value will be used as default."
attr :value, :any, required: true, doc: "The value assumed then the input is checked"
attr :checked, :boolean
end
def input_group(assigns) do
~H"""
<ul class="m-0 p-0 flex flex-col sm:flex-row list-none">
<li
:for={input <- @inputs}
class={[
"border border-solid border-slate-200",
"has-[:checked]:bg-slate-100 has-[:checked]:border-slate-700",
"first:max-sm:rounded-t-lg last:max-sm:rounded-b-lg",
"sm:first:rounded-l-lg sm:last:rounded-r-lg"
]}
>
<.input
id={input.id}
type={@type}
field={@field}
label={input[:label]}
value={input.value}
checked={input[:checked]}
multiple={if(@type == "checkbox", do: "true")}
{@rest}
/>
</li>
</ul>
"""
end
@doc """
Renders a simple fieldset for grouping radio and checkbox inputs.
"""
attr :legend, :string, required: true, doc: "A concise label for the fieldset."
slot :inner_block,
required: true,
doc: "The fieldset content, containing multiple options for a radio input or checkbox input."
def fieldset(assigns) do
~H"""
<fieldset class="my-3 w-full">
<legend class="font-semifold text-slate-600 text-sm"><%= @legend %></legend>
<%= render_slot(@inner_block) %>
</fieldset>
"""
end
end