BladeTail UI

home
v2 Docs
Livewire Data-table

Radio

Blade component for form radio button.

The form radio button with basic style and two different sizes! You can also use default HTML attributes in this component!


Basic

Attribute `id` must be placed for clickable action!

<div class="flex">
    <x-radio id="radio1" name="option" label="Option 1" />
    <x-radio id="radio2" name="option" label="Option 2" />
</div>

Result




Size

Two sizes: default, sm

<div class="flex">
    <x-radio id="radio3" name="option" label="Option 1" />
    <x-radio id="radio4" name="option" label="Option 2" />
</div>
<div class="flex">
    <x-radio sm id="radio5" name="option1" label="Option 1" />
    <x-radio sm id="radio6" name="option1" label="Option 2" />
</div>

Result






Wrapper

Place css classes for wrapper div with this `wrapper` prop

<div class="flex">
    <x-radio wrapper="bg-pink-100 rounded"
        id="radio7" name="option2" label="Option 1" />
    <x-radio wrapper="bg-green-100 rounded"
        id="radio8"  name="option2" label="Option 2" />
</div>

Result




Other attributes

You can place other and default attributes in this component 

<x-radio wire:modal="privacy" />
<x-radio onclick="tosomething()" />
Home
Livewire DataTable
blog

© 2021, BladeTail-UI.

Made with by Deva

Build with Laravel, TailwindCSS, Livewire and AlpineJS