Croissant Opt In Input

This component is a checkbox with all styling completely stripped. When checked, the Croissant local storage opt-in value will be set to true.

The component is intentionally completely visually hidden so that the styling can be completely customized by applying a custom CSS class.

Required Attributes

`merchant-id`

Learn More

`placement`

Learn More

Optional Attributes

label

Type: String

The default is "Croissant Opt-In Checkbox". This sets the checkbox input's aria-label value.

There is no <label> tag attributed to this component. If a <label> is desired, it can be created externally and linked to the input via the input's name "croissant-opt-in-input".

Example using label attribute:

<croissant-opt-in-input label="Opt in to Croissant"></croissant-opt-in-input>

Example using an external label

<croissant-opt-in-input label=""></croissant-opt-in-input>
<label for="croissant-opt-in-input">Opt in to Croissant for Guaranteed Buybacks.</label>

Customization

custom-checkbox-class

Type: String

The croissant-opt-in-input is wrapped in a div that accepts a custom CSS class that will style the nested input.

Example Code:

<croissant-opt-in-input custom-checkbox-class="checkbox"></croissant-opt-in-input>
// See CSS tab for example CSS

.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 22px;
  padding: 2px;
  border: 2px solid violet;
  border-radius: 50%;
  cursor: pointer;
}

.checkbox input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  background-color: rgb(168, 86, 168);
  border-radius: 50%;
}

.checkbox input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.checkbox input[type="checkbox"]:hover {
  color: black;
}

Screenshot

Selected:

Unselected: