The radio component offers a versatile and enhanced user experience with several noteworthy features in its latest version. Users have the flexibility to choose between left or right labeling, and the component is available in various sizes suitable for radio applications. One of its standout features is the ability to employ different rounding methods, allowing for tailored customization to meet specific needs. Additionally, the radio component provides a visually appealing touch, offering six default color options, including primary, secondary, positive, negative, warning, and info, which can be easily customized to suit your preferences.
Within the radio, you have the flexibility to choose between using the label on either the right or left side.
1<x-radio id="left-label" left-label="Label in Left" wire:model="model1" value="left-label" />2 3<x-radio id="label" label="Label in Right" wire:model="model1" value="label" />Additionally, we offer a diverse selection of sizes suitable for radio applications.
1<x-radio id="size-xs" wire:model="model2" value="xs" xs />2 3<x-radio id="size-sm" wire:model="model2" value="sm" sm /> {{-- DEFAULT --}}4 5<x-radio id="size-md" wire:model="model2" value="md" md />6 7<x-radio id="size-lg" wire:model="model2" value="lg" lg />8 9<x-radio id="size-xl" wire:model="model2" value="xl" xl />A notable enhancement in this latest version is the ability to employ different rounding methods in the radio, allowing for customization as needed.
1{{-- CSS: 'rounded-none' - You can use |rounded="none"| too --}} 2<x-radio id="rounded-none" wire:model="model3" squared label="None" value="none" xl /> 3 4{{-- CSS: 'rounded-sm' --}} 5<x-radio id="rounded-sm" wire:model="model3" rounded="sm" label="SM" value="sm" xl /> 6 7{{-- CSS: 'rounded' --}} 8<x-radio id="rounded-base" wire:model="model3" rounded="base" label="Base" value="base" xl /> 9 10{{-- CSS: 'rounded-md' --}}11<x-radio id="rounded-md" wire:model="model3" rounded="md" label="MD" value="md" xl />12 13{{-- CSS: 'rounded-lg' --}}14<x-radio id="rounded-lg" wire:model="model3" rounded="lg" label="LG" value="lg" xl />15 16{{-- CSS: 'rounded-xl' --}}17<x-radio id="rounded-xl" wire:model="model3" rounded="xl" label="XL" value="xl" xl />18 19{{-- CSS: 'rounded-2xl' --}}20<x-radio id="rounded-2xl" wire:model="model3" rounded="2xl" label="2XL" value="2xl" xl />21 22{{-- CSS: 'rounded-3xl' --}}23<x-radio id="rounded-3xl" wire:model="model3" rounded="3xl" label="3XL" value="3xl" xl />24 25{{-- CSS: 'rounded-full' - You can use |rounded| too - DEFAULT --}}26<x-radio id="rounded-full" wire:model="model3" rounded="full" label="Full" value="full" xl />27 28{{-- Or Custom --}}29<x-radio id="rounded-custom" wire:model="model3" rounded="rounded-[0.4rem]" label="Custom" value="custom" xl />Furthermore, you can now customize the interior color of the radio, with six default options available: primary, secondary, positive, negative, warning, and info.
1<x-radio id="color-primary" wire:model="model4" label="Primary" primary value="primary" xl /> 2 3<x-radio id="color-secondary" wire:model="model4" label="Secondary" secondary value="secondary" xl /> 4 5<x-radio id="color-positive" wire:model="model4" label="Positive" positive value="positive" xl /> 6 7<x-radio id="color-negative" wire:model="model4" label="Negative" negative value="negative" xl /> 8 9<x-radio id="color-warning" wire:model="model4" label="Warning" warning value="warning" xl />10 11<x-radio id="color-info" wire:model="model4" label="Info" info value="info" xl />