Portal UI

Radio

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. 

<div class="flex gap-2 flex-col">
    <x-portal::radio id="push" label="Push notifications" value="push" name="notif[]" />
    <x-portal::radio id="email" label="Email" value="email" name="notif[]" />
    <x-portal::radio id="term2" label="Disabled" value="term2" name="notif[]" disabled />
    <x-portal::radio id="app" label="In-app alerts" value="app" name="notif[]" />
    <x-portal::radio id="sms" label="SMS" value="sms" name="notif[]" />
</div>

Publishing Component

If you want to customize the components, you can publish them by running the following command : 

php artisan vendor:publish --tag=portal-ui:radio --force


With Description 

<div class="flex gap-3 flex-col">
    <x-portal::radio 
        id="newsletter" 
        value="newsletter" 
        name="desc[]" 
        label="Newsletter"
        description="Receive our monthly newsletter with the latest updates and offers." 
    />
    <x-portal::radio 
        id="updates" 
        value="updates" 
        name="desc[]" 
        label="Product updates"
        description="Stay informed about new features and product updates." 
    />
    <x-portal::radio 
        id="invitations" 
        value="invitations" 
        name="desc[]" 
        label="Event invitations"
        description="Get invitations to our exclusive events and webinars." 
    />
</div>


Radio Group 

<x-portal::radio.group 
    label="Subscription preferences" 
    class="flex-col"
>
    <x-portal::radio 
        id="newsletter_group" 
        value="newsletter" 
        name="group[]" 
        label="Newsletter"
        description="Receive our monthly newsletter with the latest updates and offers." 
    />
    <x-portal::radio 
        id="updates_group" 
        value="updates" 
        name="group[]" 
        label="Product updates"
        description="Stay informed about new features and product updates." 
    />
    <x-portal::radio 
        id="invitations_group" 
        value="invitations" 
        name="group[]" 
        label="Event invitations"
        description="Get invitations to our exclusive events and webinars." 
    />
</x-portal::radio.group>