Register

Checkboxes & radios

Choices: several, one, or on and off

Checkboxes

Several at once.

Show on the receipt
Show the code
<fieldset class="option-set">
<legend class="label">Show on the receipt</legend>
<label class="choice" for="cr-1">
<input type="checkbox" id="cr-1" checked>
<span class="box">
<i class="ti ti-check">
</i>
</span>Logo</label>
<label class="choice" for="cr-2">
<input type="checkbox" id="cr-2" checked>
<span class="box">
<i class="ti ti-check">
</i>
</span>Barcode</label>
<label class="choice" for="cr-3">
<input type="checkbox" id="cr-3">
<span class="box">
<i class="ti ti-check">
</i>
</span>Survey QR code</label>
<label class="choice" for="cr-4">
<input type="checkbox" id="cr-4" checked disabled>
<span class="box">
<i class="ti ti-check">
</i>
</span>Tax by rate (only the owner)</label>
</fieldset>

Radio buttons

One of a few.

Refund to
Show the code
<fieldset class="option-set">
<legend class="label">Refund to</legend>
<label class="choice" for="cr-r1">
<input type="radio" id="cr-r1" name="cr-r" checked>
<span class="box round">
</span>The card it was paid with</label>
<label class="choice" for="cr-r2">
<input type="radio" id="cr-r2" name="cr-r">
<span class="box round">
</span>Cash</label>
<label class="choice" for="cr-r3">
<input type="radio" id="cr-r3" name="cr-r">
<span class="box round">
</span>Store credit</label>
</fieldset>

Switches

On or off, taking effect at once.

Show the code
<div class="stack tight w-100">
<label class="setting" for="cr-s1">
<span>Ask for a tip</span>
<span class="choice">
<input type="checkbox" id="cr-s1" name="cr-s1" checked>
<span class="switch">
</span>
</span>
</label>
<label class="setting" for="cr-s2">
<span>Print the receipt by itself</span>
<span class="choice">
<input type="checkbox" id="cr-s2" name="cr-s2">
<span class="switch">
</span>
</span>
</label>
</div>

Chips and cards

Bigger targets for a choice that matters.

Size
Plan
Show the code
<div class="stack w-100">
<fieldset class="option-set">
<legend class="label">Size</legend>
<div class="cluster">
<label class="option-chip">
<input type="radio" name="cr-size" value="Small">
<span>Small</span>
</label>
<label class="option-chip">
<input type="radio" name="cr-size" value="Medium" checked>
<span>Medium</span>
</label>
<label class="option-chip">
<input type="radio" name="cr-size" value="Large">
<span>Large</span>
</label>
</div>
</fieldset>
<fieldset class="option-set">
<legend class="label">Plan</legend>
<div class="grid-auto" style="--min: 180px">
<label class="option-card">
<input type="radio" name="cr-plan">
<b>Starter</b>
<span class="muted fs-sm">$29 a month</span>
</label>
<label class="option-card">
<input type="radio" name="cr-plan" checked>
<b>Growth</b>
<span class="muted fs-sm">$79 a month</span>
</label>
<label class="option-card">
<input type="radio" name="cr-plan">
<b>Pro</b>
<span class="muted fs-sm">$149 a month</span>
</label>
</div>
</fieldset>
</div>