Fields
Types
Radio

Radio Field

A radio button group for selecting a single option from visible choices.

Basic Usage

$stack->field('alignment', [
    'type' => 'radio',
    'label' => 'Alignment',
    'default' => 'left',
    'options' => [
        ['value' => 'left', 'label' => 'Left'],
        ['value' => 'center', 'label' => 'Center'],
        ['value' => 'right', 'label' => 'Right'],
    ],
]);

Properties

PropertyTypeDefaultDescription
typestring-Required. Must be 'radio'
labelstring-Field label displayed to users
descriptionstring''Help text below the field
defaultstring''Default selected value
optionsarray[]Required. Array of options
conditionsarray[]Conditional display rules

Options Format

'options' => [
    ['value' => 'option_value', 'label' => 'Display Label'],
]

Examples

Post Display Mode

$stack->field('display_mode', [
    'type' => 'radio',
    'label' => 'Display Mode',
    'default' => 'standard',
    'options' => [
        ['value' => 'standard', 'label' => 'Standard'],
        ['value' => 'compact', 'label' => 'Compact'],
        ['value' => 'expanded', 'label' => 'Expanded'],
    ],
]);

Button Style

$stack->field('button_style', [
    'type' => 'radio',
    'label' => 'Button Style',
    'default' => 'solid',
    'options' => [
        ['value' => 'solid', 'label' => 'Solid'],
        ['value' => 'outline', 'label' => 'Outline'],
        ['value' => 'ghost', 'label' => 'Ghost'],
    ],
]);

Image Position

$stack->field('image_position', [
    'type' => 'radio',
    'label' => 'Image Position',
    'default' => 'top',
    'options' => [
        ['value' => 'top', 'label' => 'Top'],
        ['value' => 'left', 'label' => 'Left'],
        ['value' => 'right', 'label' => 'Right'],
        ['value' => 'background', 'label' => 'Background'],
    ],
]);

With Conditional Display

$stack->field('nav_type', [
    'type' => 'radio',
    'label' => 'Navigation Type',
    'default' => 'horizontal',
    'options' => [
        ['value' => 'horizontal', 'label' => 'Horizontal Menu'],
        ['value' => 'vertical', 'label' => 'Vertical Sidebar'],
        ['value' => 'hamburger', 'label' => 'Hamburger Only'],
    ],
]);
 
$stack->field('nav_position', [
    'type' => 'radio',
    'label' => 'Navigation Position',
    'default' => 'left',
    'options' => [
        ['value' => 'left', 'label' => 'Left'],
        ['value' => 'right', 'label' => 'Right'],
    ],
    'conditions' => [
        ['field' => 'nav_type', 'operator' => '==', 'value' => 'vertical'],
    ],
]);

Retrieving Value

// For options
$alignment = my_option('alignment', 'left');
 
// For post meta
$display_mode = get_post_meta($post_id, 'display_mode', true);

Output Example

<?php $alignment = my_option('alignment', 'left'); ?>
<div class="content align-<?php echo esc_attr($alignment); ?>">
    <!-- Content -->
</div>

Switch Statement

$style = my_option('button_style', 'solid');
 
switch ($style) {
    case 'outline':
        $class = 'btn-outline';
        break;
    case 'ghost':
        $class = 'btn-ghost';
        break;
    default:
        $class = 'btn-solid';
}
 
echo '<button class="' . esc_attr($class) . '">Click</button>';

When to Use Radio vs Select

Use Radio WhenUse Select When
3-5 optionsMore than 5 options
All options should be visibleSpace is limited
Visual comparison is helpfulSimple selection needed

Related Fields