Payment Switcher
Open in Figma
Payment Switcher Group
This example shows a payment switcher group component.
<fieldset>
<legend class="visually-hidden">Testing</legend>
<div class="flex flex--column align-items-baseline gap-m-fixed-desktop">
<label class="payment-switcher" for="test-id1-annual">
<div class="check-radio">
<input id="test-id1-annual" class="payment-switcher__radio-button" type="radio" name="test-id1" value="a">
</div>
<div class="payment-switcher__content heading">
<div class="gap-s flex flex--column">
<p class="bold">Annual</p>
<p>Payment today</p>
</div>
<div class="payment-switcher__summary">
<span class="bold">£398.10</span>
<span> / year</span>
</div>
</div>
</label>
<label class="payment-switcher" for="test-id1-monthly">
<div class="check-radio">
<input id="test-id1-monthly" class="payment-switcher__radio-button" type="radio" name="test-id1" value="m">
</div>
<div class="payment-switcher__content heading">
<div class="gap-s flex flex--column">
<p class="bold">Monthly</p>
<div class="monthly-breakdown">
<div class="monthly-breakdown__content heading">
<p class="bold">£38.27</p>
<p class="copy--small">today</p>
</div>
<div class="monthly-breakdown__circle-container copy--small">
<span class="monthly-breakdown__circle-text">then</span>
</div>
<div class="monthly-breakdown__content heading">
<p class="bold">£38.20</p>
<p class="copy--small">x11 months</p>
</div>
</div>
</div>
<div class="payment-switcher__summary">
<span class="bold">£398.10</span>
<span> / year</span>
</div>
</div>
</label>
</div>
<div class="input-field__validation"></div>
</fieldset>Payment Switcher Group - Annual payment plan only
This example shows payment switcher group component with annual payment plan only.
<fieldset>
<legend class="visually-hidden">Testing</legend>
<div class="flex flex--column align-items-baseline gap-m-fixed-desktop">
<label class="payment-switcher" for="test-id2-annual">
<div class="check-radio">
<input id="test-id2-annual" class="payment-switcher__radio-button" type="radio" name="test-id2" value="a">
</div>
<div class="payment-switcher__content heading">
<div class="gap-s flex flex--column">
<p class="bold">Annual</p>
<p>Payment today</p>
</div>
<div class="payment-switcher__summary">
<span class="bold">£398.10</span>
<span> / year</span>
</div>
</div>
</label>
</div>
<div class="input-field__validation"></div>
</fieldset>Payment Switcher - Monthly payment plan only
This example shows payment switcher group component with monthly payment plan only.
<fieldset>
<legend class="visually-hidden">Testing</legend>
<div class="flex flex--column align-items-baseline gap-m-fixed-desktop">
<label class="payment-switcher" for="test-id3-monthly">
<div class="check-radio">
<input id="test-id3-monthly" class="payment-switcher__radio-button" type="radio" name="test-id3" value="m">
</div>
<div class="payment-switcher__content heading">
<div class="gap-s flex flex--column">
<p class="bold">Monthly</p>
<div class="monthly-breakdown">
<div class="monthly-breakdown__content heading">
<p class="bold">£38.27</p>
<p class="copy--small">today</p>
</div>
<div class="monthly-breakdown__circle-container copy--small">
<span class="monthly-breakdown__circle-text">then</span>
</div>
<div class="monthly-breakdown__content heading">
<p class="bold">£38.20</p>
<p class="copy--small">x11 months</p>
</div>
</div>
</div>
<div class="payment-switcher__summary">
<span class="bold">£398.10</span>
<span> / year</span>
</div>
</div>
</label>
</div>
<div class="input-field__validation"></div>
</fieldset>Payment Switcher - Condensed
This example shows payment switcher group component with condensed layout.
<fieldset>
<legend class="visually-hidden">Testing</legend>
<div class="flex flex--column align-items-baseline gap-m-fixed-desktop">
<label class="payment-switcher payment-switcher--condensed" for="test-id4-annual">
<div class="check-radio">
<input id="test-id4-annual" class="payment-switcher__radio-button" type="radio" name="test-id4" value="a">
</div>
<div class="payment-switcher__content copy">
<div class="gap-s flex flex--column">
<p class="bold">Annual</p>
<p>Payment today</p>
</div>
<div class="payment-switcher__summary">
<span class="bold">£398.10</span>
<span> / year</span>
</div>
</div>
</label>
<label class="payment-switcher payment-switcher--condensed" for="test-id4-monthly">
<div class="check-radio">
<input id="test-id4-monthly" class="payment-switcher__radio-button" type="radio" name="test-id4" value="m">
</div>
<div class="payment-switcher__content copy">
<div class="gap-s flex flex--column">
<p class="bold">Monthly</p>
<div class="monthly-breakdown">
<div class="monthly-breakdown__content copy">
<p class="bold">£38.27</p>
<p class="copy--small">today</p>
</div>
<div class="monthly-breakdown__circle-container copy--small">
<span class="monthly-breakdown__circle-text">then</span>
</div>
<div class="monthly-breakdown__content copy">
<p class="bold">£38.20</p>
<p class="copy--small">x11 months</p>
</div>
</div>
</div>
<div class="payment-switcher__summary">
<span class="bold">£398.10</span>
<span> / year</span>
</div>
</div>
</label>
</div>
<div class="input-field__validation"></div>
</fieldset>Payment Switcher - Disabled
This example shows disabled payment switcher group component.
<fieldset>
<legend class="visually-hidden">Testing</legend>
<div class="flex flex--column align-items-baseline gap-m-fixed-desktop">
<label class="payment-switcher" for="test-id5-annual">
<div class="check-radio">
<input id="test-id5-annual" disabled class="payment-switcher__radio-button" type="radio" name="test-id5" value="a">
</div>
<div class="payment-switcher__content heading">
<div class="gap-s flex flex--column">
<p class="bold">Annual</p>
<p>Payment today</p>
</div>
<div class="payment-switcher__summary">
<span class="bold">£398.10</span>
<span> / year</span>
</div>
</div>
</label>
<label class="payment-switcher" for="test-id5-monthly">
<div class="check-radio">
<input id="test-id5-monthly" disabled class="payment-switcher__radio-button" type="radio" name="test-id5" value="m">
</div>
<div class="payment-switcher__content heading">
<div class="gap-s flex flex--column">
<p class="bold">Monthly</p>
<div class="monthly-breakdown">
<div class="monthly-breakdown__content heading">
<p class="bold">£38.27</p>
<p class="copy--small">today</p>
</div>
<div class="monthly-breakdown__circle-container copy--small">
<span class="monthly-breakdown__circle-text">then</span>
</div>
<div class="monthly-breakdown__content heading">
<p class="bold">£38.20</p>
<p class="copy--small">x11 months</p>
</div>
</div>
</div>
<div class="payment-switcher__summary">
<span class="bold">£398.10</span>
<span> / year</span>
</div>
</div>
</label>
</div>
<div class="input-field__validation"></div>
</fieldset>