It's like a light switch for your app or website, letting you turn things on or off with just a click.
php artisan spur:add forms/toggle
If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.
"components": [
'forms/toggle',
]If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component
<x-spur.toggle id="accept-terms" /><x-spur.field id="accept-terms" type="toggle">
<x-spur.label>Accept Terms & Conditions</x-spur.label>
<x-spur.toggle name="accept-terms" />
</x-spur.field>Please read the terms and conditions carefully before proceeding
We promise not to spam your email
<x-spur.field id="accept-terms" type="toggle">
<x-spur.label>Accept Terms & Conditions</x-spur.label>
<x-spur.toggle name="accept-terms" />
<x-spur.description>Please read the terms and conditions carefully before proceeding</x-spur.description>
</x-spur.field>
<x-spur.field id="accept-marketing" type="toggle">
<x-spur.label>Accept to receive marketing emails</x-spur.label>
<x-spur.toggle name="accept-marketing" />
<x-spur.description>We promise not to spam your email</x-spur.description>
</x-spur.field>Please read the terms and conditions carefully before proceeding
We promise not to spam your email
<x-spur.field id="accept-terms" type="toggle">
<x-spur.label>Accept Terms & Conditions</x-spur.label>
<x-spur.toggle name="accept-terms" checked />
<x-spur.description>Please read the terms and conditions carefully before proceeding</x-spur.description>
</x-spur.field>
<x-spur.field id="accept-marketing" type="toggle">
<x-spur.label>Accept to receive marketing emails</x-spur.label>
<x-spur.toggle name="accept-marketing" />
<x-spur.description>We promise not to spam your email</x-spur.description>
</x-spur.field>You can use the attribute `dense` for a more compact version of toggle
To process please accept terms & conditions
<x-spur.field id="accept-terms" type="toggle">
<x-spur.label>Accept Terms & Condition</x-spur.label>
<x-spur.toggle name="accept-terms" dense/>
<x-spur.description>To process please accept terms & conditions</x-spur.description>
</x-spur.field>Please read the terms and conditions carefully before proceeding
We promise not to spam your email
<x-spur.field id="accept-terms" type="toggle" disabled>
<x-spur.label>Accept Terms & Conditions</x-spur.label>
<x-spur.toggle name="accept-terms" />
<x-spur.description>Please read the terms and conditions carefully before proceeding</x-spur.description>
</x-spur.field>
<x-spur.field id="accept-marketing" type="toggle">
<x-spur.label>Accept to receive marketing emails</x-spur.label>
<x-spur.toggle name="accept-marketing" />
<x-spur.description>We promise not to spam your email</x-spur.description>
</x-spur.field>To process please accept terms & conditions
<x-spur.field id="accept-terms" type="toggle" invalid>
<x-spur.label>Accept Terms & Condition</x-spur.label>
<x-spur.toggle name="accept-terms" />
<x-spur.description>To process please accept terms & conditions</x-spur.description>
</x-spur.field><x-spur.toggle />
<x-spur.toggle color="indigo" />
<x-spur.toggle color="blue" />
<x-spur.toggle color="green" />
<x-spur.toggle color="yellow" />
<x-spur.toggle color="red" />