Skip to content
E-218Element

Radio Plan Picker

Plan and billing selector built on native radio inputs: tiles show the plan name, a short line, the price and an optional badge (Popular, Save 20%), the selected tile gets a coloured border, a tinted fill and a radio do…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Radio Plan Picker reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type
Element
Category
Radios
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 4

Set on the section, in Etch’s attributes panel. No code needed.

data-theme
lightdark

surface

data-layout
rowstack

tiles side by side or stacked

data-style
outlinefilledglow

selected look

data-anim
risefadenone

entrance

Component props 1

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Plan3 in this pattern · 7 props
PropTypeDefault
name
text

plan

value
text

pro

title
text

Pro

text
text

For growing teams.

price
text

$29

period
text

/ month

badge
text

empty

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan