Packages
petal_components
4.4.0
4.7.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/input_group.ex
defmodule PetalComponents.InputGroup do
use Phoenix.Component
@doc """
Groups an input with addons - text prefixes and suffixes, icons, buttons or
keyboard hints - on a single shared field surface.
The group carries the border, radius and focus ring; any petal input placed
inside is automatically stripped of its own surface, so `<.input>` works
unchanged.
Inline addons sit beside the input via `:leading` and `:trailing`. Block
addons render as full-width rows above/below via `:block_start` and
`:block_end` - useful for toolbars and character counters, especially with
textareas.
## Examples
<.input_group>
<:leading>https://</:leading>
<.input type="text" name="domain" placeholder="example.com" />
</.input_group>
<.input_group>
<:leading>$</:leading>
<.input type="number" name="amount" placeholder="0.00" />
<:trailing>USD</:trailing>
</.input_group>
<.input_group>
<.input type="textarea" name="bio" />
<:block_end class="justify-end text-xs">120/280</:block_end>
</.input_group>
"""
attr :class, :any, default: nil, doc: "CSS classes for the group container"
attr :rest, :global
slot :leading, doc: "content rendered before the input (text, icon, button, kbd)"
slot :trailing, doc: "content rendered after the input (text, icon, button, kbd)"
slot :block_start, doc: "full-width row above the input" do
attr :class, :any
end
slot :block_end, doc: "full-width row below the input (e.g. a character counter)" do
attr :class, :any
end
slot :inner_block, required: true, doc: "the input itself"
def input_group(assigns) do
~H"""
<div class={["pc-input-group", @class]} {@rest}>
<div :for={block <- @block_start} class={["pc-input-group__block", block[:class]]}>
{render_slot(block)}
</div>
<div class="pc-input-group__row">
<div :if={@leading != []} class="pc-input-group__addon pc-input-group__addon--leading">
{render_slot(@leading)}
</div>
{render_slot(@inner_block)}
<div :if={@trailing != []} class="pc-input-group__addon pc-input-group__addon--trailing">
{render_slot(@trailing)}
</div>
</div>
<div :for={block <- @block_end} class={["pc-input-group__block", block[:class]]}>
{render_slot(block)}
</div>
</div>
"""
end
end