Select

Overview

The Select field creates a drop down select or multiple select input.

Screenshots

Changelog

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

Settings

Name Description
Choices Each choice is entered on a new line (eg. ‘Red’). For more control over the value and label, you may use a ‘ : ‘ character to specify both (eg. ‘red : Red’)
Default Value Specify 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 empty choice will be replaced by a ‘x’ icon allowing you to remove the selected value(s)
Multiple This setting will allow 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 JS library to enhance your select field with more functionality (search, ajax, reorder). Added in version 5.0.0
AJAX This setting will appear if using the ‘Stylized UI’ and will use AJAX to populate the select field’s choices. Very useful if using the acf/load_value filter to populate choices as it can help speed up page load times. Added in version 5.0.0
Return Format Change the value format returned by the get_field() and similar functions.

Template usage

Basic

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

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

Multiple

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

<?php

// vars	
$colors = get_field('color');


// check
if( $colors ): ?>
<p>Color: <?php echo implode(', ', $colors); ?></p>
<?php endif; ?>

Display value and label

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

<?php

// vars
$field = get_field_object('color');
$value = $field['value'];
$label = $field['choices'][ $value ];

?>
<p>Color: <span class="color-<?php echo $value; ?>"><?php echo $label; ?></span></p>

Format value setting

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

<?php

// vars
$color = get_field('color');

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

Conditional

This example shows how to use a selected value to conditionally perform a task.

<?php if( get_field('color') == 'red' ): ?>
	<p>Selected the Red choice!</p>
<?php endif; ?>