The checkbox component has been enhanced in the latest version, offering a range of versatile features. You can now choose to position the label on either the right or the left side of the checkbox, providing greater flexibility in design. Additionally, the component offers various size options to cater to different requirements. Another noteworthy addition is the ability to apply different rounding styles to the checkbox, allowing for customizable and aesthetically pleasing checkboxes. Furthermore, you have the option to change the color within the checkbox, with six default choices: primary, secondary, positive, negative, warning, and info. This comprehensive set of features makes the checkbox component a highly customizable and visually appealing element in your user interface design.
Within the checkbox, you can choose to position the label either on the right or on the left.
1<x-checkbox id="left-label" left-label="Label in Left" wire:model="model1" value="left-label" />2 3<x-checkbox id="label" label="Label in Right" wire:model="model1" value="label" />We offer a variety of sizes for checkboxes to suit your needs.
1<x-checkbox id="size-xs" wire:model="model2" value="xs" xs />2 3<x-checkbox id="size-sm" wire:model="model2" value="sm" sm /> {{-- DEFAULT --}}4 5<x-checkbox id="size-md" wire:model="model2" value="md" md />6 7<x-checkbox id="size-lg" wire:model="model2" value="lg" lg />8 9<x-checkbox id="size-xl" wire:model="model2" value="xl" xl />An exciting new feature in this updated version is the option to apply different styles of rounding to checkboxes and customize them as needed.
1{{-- CSS: 'rounded-none' - You can use |rounded="none"| too --}} 2<x-checkbox id="rounded-none" wire:model="model3" squared label="None" value="none" xl /> 3 4{{-- CSS: 'rounded-sm' --}} 5<x-checkbox id="rounded-sm" wire:model="model3" rounded="sm" label="SM" value="sm" xl /> 6 7{{-- CSS: 'rounded' --}} 8<x-checkbox id="rounded-base" wire:model="model3" rounded="base" label="Base" value="base" xl /> 9 10{{-- CSS: 'rounded-md' --}}11<x-checkbox id="rounded-md" wire:model="model3" rounded="md" label="MD" value="md" xl />12 13{{-- CSS: 'rounded-lg' --}}14<x-checkbox id="rounded-lg" wire:model="model3" rounded="lg" label="LG" value="lg" xl />15 16{{-- CSS: 'rounded-xl' --}}17<x-checkbox id="rounded-xl" wire:model="model3" rounded="xl" label="XL" value="xl" xl />18 19{{-- CSS: 'rounded-2xl' --}}20<x-checkbox id="rounded-2xl" wire:model="model3" rounded="2xl" label="2XL" value="2xl" xl />21 22{{-- CSS: 'rounded-3xl' --}}23<x-checkbox 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-checkbox id="rounded-full" wire:model="model3" rounded="full" label="Full" value="full" xl />27 28{{-- Or Custom --}}29<x-checkbox id="rounded-custom" wire:model="model3" rounded="rounded-[0.4rem]" label="Custom" value="custom" xl />Now, you can also alter the color within the checkbox, with six default options: primary, secondary, positive, negative, warning, and info.
1<x-checkbox id="color-primary" wire:model="model4" label="Primary" primary value="primary" xl /> 2 3<x-checkbox id="color-secondary" wire:model="model4" label="Secondary" secondary value="secondary" xl /> 4 5<x-checkbox id="color-positive" wire:model="model4" label="Positive" positive value="positive" xl /> 6 7<x-checkbox id="color-negative" wire:model="model4" label="Negative" negative value="negative" xl /> 8 9<x-checkbox id="color-warning" wire:model="model4" label="Warning" warning value="warning" xl />10 11<x-checkbox id="color-info" wire:model="model4" label="Info" info value="info" xl />