Catalog Billing

<.interval_selector>

ConnieUI.Billing

HEEx 
<ConnieUI.Billing.interval_selector
  id="catalog-plan-interval" interval={:year}
  monthly_click={JS.push("interval")}
  yearly_click={JS.push("interval")}
>
  <:savings>
    <ConnieUI.Badges.badge color="success" size="sm">Save 20%</ConnieUI.Badges.badge>
  </:savings>
</ConnieUI.Billing.interval_selector>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:atom
:string
:string

Set by the example

monthly_click yearly_click

Docs

Monthly/annual segmented control for a pricing grid. Columns are auto-width rather than equal halves, because the annual segment usually carries a savings badge. Forcing both to 50% leaves the shorter label adrift in whitespace while the other fills its half, so the two read as differently padded. That is what the custom element is for: with auto columns only layout knows the segment widths, so the thumb's width and offset are measured and applied rather than expressed in CSS. In pure CSS the choice is between a thumb that fits and one that animates, since equal halves slide but mis-fit, and a grid item in the active column fits but cannot transition between columns.
Attribute Type Default Description
id :string "plan-interval"
interval * :atom
:month | :year
monthly_click * {:struct, Phoenix.LiveView.JS}
yearly_click * {:struct, Phoenix.LiveView.JS}
monthly_label :string "Monthly"
yearly_label :string "Annual"
Slot Slot attributes Description
:savings