<div class="wpuf-fields">
    <div
        v-if="field.inline !== 'yes'"
        class="wpuf-space-y-2">
        <div
            v-if="has_options" v-for="(option, key) in field.options" :key="key"
            class="wpuf-flex wpuf-items-center">
            <input
                type="radio"
                :name="field.name"
                :value="key"
                :checked="field.selected === key"
                :id="'radio-' + field.name + '-' + key"
                :class="builder_class_names('radio')">
            <label :for="'radio-' + field.name + '-' + key">
                {{ option }}
                <span v-if="field.show_price_label === 'yes' && field.prices && field.prices[key]" class="wpuf-text-gray-600">
                    - {{ format_price(field.prices[key]) }}
                </span>
            </label>
        </div>
    </div>

    <div
        v-else
        class="wpuf-space-y-6 sm:wpuf-flex sm:wpuf-items-center sm:wpuf-space-x-10 sm:wpuf-space-y-0">
        <div
            v-if="has_options" v-for="(option, key) in field.options" :key="key"
            class="wpuf-flex wpuf-items-center">
            <input
                type="radio"
                :name="field.name"
                :value="key"
                :checked="field.selected === key"
                :id="'radio-' + field.name + '-' + key"
                :class="builder_class_names('radio')">
            <label :for="'radio-' + field.name + '-' + key">
                {{ option }}
                <span v-if="field.show_price_label === 'yes' && field.prices && field.prices[key]" class="wpuf-text-gray-600">
                    - {{ format_price(field.prices[key]) }}
                </span>
            </label>
        </div>
    </div>

    <p v-if="field.help" class="wpuf-mt-2 wpuf-mb-0 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
</div>