if ( ! defined( 'ABSPATH' ) ) {
class WPForms_Field_Checkbox extends WPForms_Field {
* Primary class constructor.
// Define field type information.
$this->name = esc_html__( 'Checkboxes', 'wpforms-lite' );
$this->keywords = esc_html__( 'choice', 'wpforms-lite' );
$this->type = 'checkbox';
$this->icon = 'fa-check-square-o';
'label' => esc_html__( 'First Choice', 'wpforms-lite' ),
'label' => esc_html__( 'Second Choice', 'wpforms-lite' ),
'label' => esc_html__( 'Third Choice', 'wpforms-lite' ),
$this->default_settings = [
'choices' => $this->defaults,
private function hooks() {
// Customize HTML field values.
add_filter( 'wpforms_html_field_value', [ $this, 'field_html_value' ], 10, 4 );
add_filter( "wpforms_{$this->type}_field_html_value_images", [ $this, 'field_html_value_images' ], 10, 3 );
// Define additional field properties.
add_filter( 'wpforms_field_properties_checkbox', [ $this, 'field_properties' ], 5, 3 );
// This field requires fieldset+legend instead of the field label.
add_filter( "wpforms_frontend_modern_is_field_requires_fieldset_{$this->type}", '__return_true', PHP_INT_MAX, 2 );
* Define additional field properties.
* @param array $properties Field properties.
* @param array $field Field settings.
* @param array $form_data Form data and settings.
public function field_properties( $properties, $field, $form_data ) { // phpcs:ignore Generic.Metrics.CyclomaticComplexity.MaxExceeded
$form_id = absint( $form_data['id'] );
$field_id = wpforms_validate_field_id( $field['id'] );
$choices = $field['choices'];
$dynamic = wpforms_get_field_dynamic_choices( $field, $form_id, $form_data );
if ( $dynamic !== false ) {
$field['show_values'] = true;
// Remove primary input, unset for attribute for label.
unset( $properties['inputs']['primary'], $properties['label']['attr']['for'] );
// Set input container (ul) properties.
$properties['input_container'] = [
'class' => [ ! empty( $field['random'] ) ? 'wpforms-randomize' : '' ],
'id' => "wpforms-{$form_id}-field_{$field_id}",
$is_choice_limit_set = ! empty( $field['choice_limit'] ) && (int) $field['choice_limit'] > 0;
if ( $is_choice_limit_set ) {
$properties['input_container']['data']['choice-limit'] = $field['choice_limit'];
foreach ( $choices as $key => $choice ) {
// Used for dynamic choices.
$depth = isset( $choice['depth'] ) ? absint( $choice['depth'] ) : 1;
$label = isset( $choice['label'] ) ? $choice['label'] : '';
// Choice labels should not be left blank, but if they are we
// provide a basic value.
$value = isset( $field['show_values'] ) ? $choice['value'] : $label;
if ( 1 === count( $choices ) ) {
$value = esc_html__( 'Checked', 'wpforms-lite' );
/* translators: %s - choice number. */
$value = sprintf( esc_html__( 'Choice %s', 'wpforms-lite' ), $key );
$properties['inputs'][ $key ] = [
'class' => [ "choice-{$key}", "depth-{$depth}" ],
'for' => "wpforms-{$form_id}-field_{$field_id}_{$key}",
'class' => [ 'wpforms-field-label-inline' ],
'name' => "wpforms[fields][{$field_id}][]",
'id' => "wpforms-{$form_id}-field_{$field_id}_{$key}",
'icon' => isset( $choice['icon'] ) ? $choice['icon'] : '',
'icon_style' => isset( $choice['icon_style'] ) ? $choice['icon_style'] : '',
'image' => isset( $choice['image'] ) ? $choice['image'] : '',
'required' => ! empty( $field['required'] ) ? 'required' : '',
'default' => isset( $choice['default'] ),
// Rule for validator only if needed.
if ( $is_choice_limit_set ) {
$properties['inputs'][ $key ]['data']['rule-check-limit'] = 'true';
// Required class for pagebreak validation.
if ( ! empty( $field['required'] ) ) {
$properties['input_container']['class'][] = 'wpforms-field-required';
// Custom properties if image choices is enabled.
if ( ! $dynamic && ! empty( $field['choices_images'] ) ) {
$properties['input_container']['class'][] = 'wpforms-image-choices';
$properties['input_container']['class'][] = 'wpforms-image-choices-' . sanitize_html_class( $field['choices_images_style'] );
foreach ( $properties['inputs'] as $key => $inputs ) {
$properties['inputs'][ $key ]['container']['class'][] = 'wpforms-image-choices-item';
if ( in_array( $field['choices_images_style'], [ 'modern', 'classic' ], true ) ) {
$properties['inputs'][ $key ]['class'][] = 'wpforms-screen-reader-element';
} elseif ( ! $dynamic && ! empty( $field['choices_icons'] ) ) {
$properties = wpforms()->obj( 'icon_choices' )->field_properties( $properties, $field );
// Custom properties for disclaimer format display.
if ( ! empty( $field['disclaimer_format'] ) ) {
$properties['description']['class'][] = 'wpforms-disclaimer-description';
$properties['description']['value'] = nl2br( $properties['description']['value'] );
// Add selected class for choices with defaults.
foreach ( $properties['inputs'] as $key => $inputs ) {
if ( ! empty( $inputs['default'] ) ) {
$properties['inputs'][ $key ]['container']['class'][] = 'wpforms-selected';
* Field options panel inside the builder.
* @param array $field Field settings.
public function field_options( $field ) {
$this->field_option( 'label', $field );
$this->field_option( 'choices', $field );
'value' => esc_html__( 'Generate Choices', 'wpforms-lite' ),
$this->field_option( 'choices_images', $field );
$this->field_option( 'choices_images_hide', $field );
// Choices Images Style (theme).
$this->field_option( 'choices_images_style', $field );
$this->field_option( 'choices_icons', $field );
$this->field_option( 'choices_icons_color', $field );
$this->field_option( 'choices_icons_size', $field );
$this->field_option( 'choices_icons_style', $field );
$this->field_option( 'description', $field );
$this->field_option( 'required', $field );
// Randomize order of choices.
'content' => $this->field_element(
'value' => isset( $field['random'] ) ? '1' : '0',
'desc' => esc_html__( 'Randomize Choices', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Check this option to randomize the order of the choices.', 'wpforms-lite' ),
// Show Values toggle option. This option will only show if already used
// or if manually enabled by a filter.
if ( ! empty( $field['show_values'] ) || wpforms_show_fields_options_setting() ) {
'content' => $this->field_element(
'value' => isset( $field['show_values'] ) ? $field['show_values'] : '0',
'desc' => esc_html__( 'Show Values', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Check this option to manually set form field values.', 'wpforms-lite' ),
$this->field_option( 'input_columns', $field );
$this->field_option( 'choice_limit', $field );
// Dynamic choice auto-populating toggle.
$this->field_option( 'dynamic_choices', $field );
// Dynamic choice source.
$this->field_option( 'dynamic_choices_source', $field );
$this->field_option( 'css', $field );
$this->field_option( 'label_hide', $field );
// Enable Disclaimer formatting.
'slug' => 'disclaimer_format',
'content' => $this->field_element(
'slug' => 'disclaimer_format',
'value' => isset( $field['disclaimer_format'] ) ? '1' : '0',
'desc' => esc_html__( 'Enable Disclaimer / Terms of Service Display', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Check this option to adjust the field styling to support Disclaimers and Terms of Service type agreements.', 'wpforms-lite' ),
* Field preview inside the builder.
* @param array $field Field settings.
public function field_preview( $field ) {
$this->field_preview_option( 'label', $field );
$this->field_preview_option( 'choices', $field );
$this->field_preview_option(
'class' => ! empty( $field['disclaimer_format'] ) ? 'disclaimer nl2br' : false,
* Field display on the form front-end and admin entry edit page.
* @param array $field Field settings.
* @param array $deprecated Deprecated array.
* @param array $form_data Form data and settings.
public function field_display( $field, $deprecated, $form_data ) {
$using_image_choices = empty( $field['dynamic_choices'] ) && ! empty( $field['choices_images'] );
$using_icon_choices = empty( $field['dynamic_choices'] ) && empty( $field['choices_images'] ) && ! empty( $field['choices_icons'] );
$container = $field['properties']['input_container'];
$choices = $field['properties']['inputs'];
// Do not display the field with empty choices on the frontend.
if ( ! $choices && ! is_admin() ) {
// Display a warning message on Entry Edit page.
if ( ! $choices && is_admin() ) {
$this->display_empty_dynamic_choices_message( $field );
if ( wpforms_is_amp() && ( $using_image_choices || $using_icon_choices ) ) {
$amp_state_id = str_replace( '-', '_', sanitize_key( $container['id'] ) ) . '_state';
foreach ( $choices as $key => $choice ) {
$state[ $choice['id'] ] = ! empty( $choice['default'] );
'<amp-state id="%s"><script type="application/json">%s</script></amp-state>',
esc_attr( $amp_state_id ),
wpforms_html_attributes( $container['id'], $container['class'], $container['data'], $container['attr'] )
foreach ( $choices as $key => $choice ) {
$label = $this->get_choices_label( $choice['label']['text'] ?? '', $key, $field );
if ( wpforms_is_amp() && ( $using_image_choices || $using_icon_choices ) ) {
$choice['container']['attr']['[class]'] = sprintf(
'%s + ( %s[%s] ? " wpforms-selected" : "")',
wp_json_encode( implode( ' ', $choice['container']['class'] ) ),
wp_json_encode( $choice['id'] )
// If the field is required, has the label hidden, and has
// disclaimer mode enabled, so the required status in choice
if ( ! empty( $field['disclaimer_format'] ) && ! empty( $choice['required'] ) && ! empty( $field['label_hide'] ) ) {
$required = wpforms_get_field_required_label();
wpforms_html_attributes( $choice['container']['id'], $choice['container']['class'], $choice['container']['data'], $choice['container']['attr'] )
// The required constraint in HTML5 form validation does not work with checkbox groups, so omit in AMP.
$required_attr = wpforms_is_amp() && count( $choices ) > 1 ? '' : $choice['required'];
if ( $using_image_choices ) {
// Make sure the image choices are keyboard-accessible.
$choice['label']['attr']['tabindex'] = 0;