<div x-data="{ agree: false }">
    <label>
        <input type="checkbox" x-model="agree">
        I agree to the terms and conditions
    </label>
    <p x-text="agree ? 'Agreed' : 'Not Agreed'"></p>
</div>

<div x-data="{ selectedFruits: [] }">
    <label>
        <input type="checkbox" value="Apple" x-model="selectedFruits">
        Apple
    </label>
    <label>
        <input type="checkbox" value="Banana" x-model="selectedFruits">
        Banana
    </label>
    <label>
        <input type="checkbox" value="Cherry" x-model="selectedFruits">
        Cherry
    </label>
    <p>Selected fruits: <span x-text="selectedFruits.join(', ')"></span></p>
</div>

<div x-data="{ gender: '' }">
    <label>
        <input type="radio" name="gender" value="Male" x-model="gender">
        Male
    </label>
    <label>
        <input type="radio" name="gender" value="Female" x-model="gender">
        Female
    </label>
    <p>Your gender is: <span x-text="gender"></span></p>
</div>

<div x-data="{ selectedPlan: {} }">
    <label>
        <input type="radio" name="plan" :value="{ id: 1, name: 'Basic' }" x-model="selectedPlan">
        Basic Plan
    </label>
    <label>
        <input type="radio" name="plan" :value="{ id: 2, name: 'Premium' }" x-model="selectedPlan">
        Premium Plan
    </label>
    <p x-text="`Selected Plan: ${selectedPlan.name || 'None'}`"></p>
</div>

<div x-data="{ preferences: { newsletter: false, notifications: '', } }">
    <h3>Preferences</h3>
    
    <label>
        <input type="checkbox" x-model="preferences.newsletter">
        Subscribe to Newsletter
    </label>
    <p x-text="preferences.newsletter ? 'Subscribed' : 'Not Subscribed'"></p>

    <h4>Notification Method</h4>
    <label>
        <input type="radio" name="notifications" value="Email" x-model="preferences.notifications">
        Email
    </label>
    <label>
        <input type="radio" name="notifications" value="SMS" x-model="preferences.notifications">
        SMS
    </label>
    <p x-text="preferences.notifications ? `Notifications via: ${preferences.notifications}` : 'No preference selected'"></p>
</div>

<div x-data="{ ageGroup: 0 }">
    <label>
        <input type="radio" name="age" value="18" x-model.number="ageGroup">
        18-25
    </label>
    <label>
        <input type="radio" name="age" value="26" x-model.number="ageGroup">
        26-35
    </label>
    <p x-text="`Selected age group: ${ageGroup}`"></p>
</div>