Select

Description

The Select field creates a drop-down list to select one or more choices from.

Screenshots

Changelog

  • Added Return Format setting in version 5.4.0.
  • Added Stylized UI (Select2) setting in version 5.0.0.

Settings

  • Choices
    The choices displayed when selecting a value. Enter each choice on a new line (eg. Red). For more control over the value and label, you may use a colon to specify both (eg. ‘red : Red’).

  • Default Value
    The default value(s) selected when first editing the field’s value. Enter only values, not labels.

  • Allow Null
    If selected, the select list will begin with an empty choice labelled “- Select -“. If using the Stylized UI setting, this choice will be replaced by a ‘x’ icon allowing you to remove the selected value(s).

  • Multiple
    Allows you to select more than one choice. If using the Stylized UI setting, you may also drag/drop reorder the selected choices.

  • Stylized UI
    This setting will use the Select2 JavaScript library to enhance your select field with more functionality (search, ajax, reorder).

  • AJAX
    This setting appears if using the Stylized UI and uses AJAX to populate the select field’s choices. Useful if using the acf/load_value filter to populate choices as it can help speed up page load times.

  • Return Format
    Specifies the value format returned by ACF functions. Select from Value, Label or Both (array).

Template usage

Display single selected value

This example demonstrates how to load and display a single selected value.

<p>Color: <?php the_field('color'); ?></p>

Display multiple values

This example demonstrates how to load and display multiple selected values.

<?php
$colors = get_field( 'color' );

// Create a comma-separated list from selected values.
if( $colors ): ?>
<p>Color: <?php echo implode( ', ', $colors ); ?></p>
<?php endif; ?>

Display value and label

This example demonstrates how to load a selected value and label without using the Format value setting.

<?php
$field = get_field_object( 'color' );
$value = $field['value'];
$label = $field['choices'][ $value ];
?>
<p>Color: <span class="color-<?php echo esc_attr($value); ?>"><?php echo esc_html($label); ?></span></p>

Format value setting

This example demonstrates how to load a selected value and label using the Format value setting (set to Both).

<?php
$color = get_field( 'color' );
?>
<p>Color: <span class="color-<?php echo esc_attr($color['value']); ?>"><?php echo esc_html($color['label']); ?></span></p>

Conditional

This example demonstrates how to use a selected value to conditionally perform a task. In this case, the conditional is checking to see if ‘red’ matches the selected option.

<?php 

if( get_field('color') == 'red' ) {
    // Do something.
}

Black Friday Sale 🎉 Get 30% off new licenses and 15% off early renewals!
Coupon expires Dec 1st (11:59pm GMT) - don't miss out!

* Discounted subscriptions will renew at their full price. Cancel at any time.

Coupon Code
blackfriday2020

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.