Checkbox

​

Factory

overflow.checkbox(options: CustomCheckboxElementOptions): CustomCheckboxElement

​

Example

const agree = overflow.checkbox({
  name: 'agree',
  label: 'I agree to the terms',
  required: true,
});

agree.on('onChange', ({ value }) => console.log(value));
agree.mount('#agree');

​

Options

​

mode

• 'inline' (default) renders the checkbox on the leading edge with the label to its right. The entire row is clickable. Best for consent rows where the label reads as a sentence.
• 'stacked' renders the label above the checkbox, matching the layout of other custom inputs. Use this when the checkbox needs to align with text inputs in a form grid.

​

required semantics

​

complete semantics

• required: true and unchecked → complete: false with a required error.
• required: true and checked → complete: true.
• No required, no validate → complete: true regardless of state.
• With validate → complete: true only when the callback returns null.

​

Value

type CustomCheckboxValue = boolean;

​

Inside Checkout

overflow.checkout({
  paymentMethods: ['card'],
  customElements: {
    agree: {
      elementType: 'checkbox',
      label: 'I agree to the terms',
      required: true,
    },
  },
});

​

See also

• Custom elements introduction
• Custom reference