The toggle component offers a versatile set of features to enhance user experience and customization. Users have the flexibility to position the label on either the right or left side of the toggle. Additionally, the component provides a range of toggle sizes to suit diverse needs. This updated version introduces the exciting capability to apply various rounding styles, allowing for greater design flexibility. Furthermore, users can easily modify the toggle's color with six default options, including primary, secondary, positive, negative, warning, and info.
You can customize the label's position within the toggle, opting to place it either on the right or on the left.
1<x-toggle id="left-label" left-label="Label in Left" name="toggle" />2 3<x-toggle id="label" label="Label in Right" name="toggle" />We provide a range of toggle sizes to accommodate your requirements.
1<x-toggle id="size-xs" name="toggle" xs />2 3<x-toggle id="size-sm" name="toggle" sm /> {{-- DEFAULT --}}4 5<x-toggle id="size-md" name="toggle" md />6 7<x-toggle id="size-lg" name="toggle" lg />8 9<x-toggle id="size-xl" name="toggle" xl />One of the exciting new features in this updated version is the ability to apply various rounding styles to toggles and customize them according to your preferences.
1{{-- CSS: 'rounded-none' - You can use |rounded="none"| too --}} 2<x-toggle id="rounded-none" name="toggle" squared label="None" xl /> 3 4{{-- CSS: 'rounded-sm' --}} 5<x-toggle id="rounded-sm" name="toggle" rounded="sm" label="SM" xl /> 6 7{{-- CSS: 'rounded' - DEFAULT --}} 8<x-toggle id="rounded-base" name="toggle" rounded="base" label="Base" xl /> 9 10{{-- CSS: 'rounded-md' --}}11<x-toggle id="rounded-md" name="toggle" rounded="md" label="MD" xl />12 13{{-- CSS: 'rounded-lg' --}}14<x-toggle id="rounded-lg" name="toggle" rounded="lg" label="LG" xl />15 16{{-- CSS: 'rounded-xl' --}}17<x-toggle id="rounded-xl" name="toggle" rounded="xl" label="XL" xl />18 19{{-- CSS: 'rounded-2xl' --}}20<x-toggle id="rounded-2xl" name="toggle" rounded="2xl" label="2XL" xl />21 22{{-- CSS: 'rounded-3xl' --}}23<x-toggle id="rounded-3xl" name="toggle" rounded="3xl" label="3XL" xl />24 25{{-- CSS: 'rounded-full' - You can use |rounded| too --}}26<x-toggle id="rounded-full" name="toggle" rounded="full" label="Full" xl />27 28{{-- Or Custom --}}29<x-toggle id="rounded-custom" name="toggle" rounded="rounded-[0.4rem]" label="Custom" xl />You can now modify the color within the toggle using six default options: primary, secondary, positive, negative, warning, and info.
1<x-toggle id="color-primary" name="toggle" label="Primary" primary xl /> 2 3<x-toggle id="color-secondary" name="toggle" label="Secondary" secondary xl /> 4 5<x-toggle id="color-positive" name="toggle" label="Positive" positive xl /> 6 7<x-toggle id="color-negative" name="toggle" label="Negative" negative xl /> 8 9<x-toggle id="color-warning" name="toggle" label="Warning" warning xl />10 11<x-toggle id="color-info" name="toggle" label="Info" info xl />