Like a checkbox, but you can only choose one option from a list, like picking your favorite radio station.
php artisan spur:add forms/radio
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/radio',
]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.radio /><x-spur.field id="public-repo" type="radio">
<x-spur.label>Public Repository</x-spur.label>
<x-spur.radio name="privacy" />
</x-spur.field>
<x-spur.field id="private-repo" type="radio">
<x-spur.label>Private Repository</x-spur.label>
<x-spur.radio name="privacy" />
</x-spur.field>By choosing public, everyone will be able to see and clone your repo.
By choosing public, only you will be able to see.
<x-spur.field id="public-repo" type="radio">
<x-spur.label>Public Repository</x-spur.label>
<x-spur.radio name="privacy" />
<x-spur.description>By choosing public, everyone will be able to see and clone your repo.</x-spur.description>
</x-spur.field>
<x-spur.field id="private-repo" type="radio">
<x-spur.label>Private Repository</x-spur.label>
<x-spur.radio name="privacy" />
<x-spur.description>By choosing public, only you will be able to see.</x-spur.description>
</x-spur.field>By choosing public, everyone will be able to see and clone your repo.
By choosing public, only you will be able to see.
<x-spur.field id="public-repo" type="radio">
<x-spur.label>Public Repository</x-spur.label>
<x-spur.radio name="privacy" checked/>
<x-spur.description>By choosing public, everyone will be able to see and clone your repo.</x-spur.description>
</x-spur.field>
<x-spur.field id="private-repo" type="radio">
<x-spur.label>Private Repository</x-spur.label>
<x-spur.radio name="privacy" />
<x-spur.description>By choosing public, only you will be able to see.</x-spur.description>
</x-spur.field>By choosing public, everyone will be able to see and clone your repo.
By choosing public, only you will be able to see. You need to be admin to do this action
<x-spur.field id="public-repo" type="radio">
<x-spur.label>Public Repository</x-spur.label>
<x-spur.radio name="privacy" checked/>
<x-spur.description>By choosing public, everyone will be able to see and clone your repo.</x-spur.description>
</x-spur.field>
<x-spur.field id="private-repo" type="radio">
<x-spur.label>Private Repository</x-spur.label>
<x-spur.radio name="privacy" disabled/>
<x-spur.description>By choosing public, only you will be able to see. You need to be admin to do this action</x-spur.description>
</x-spur.field>By choosing public, everyone will be able to see and clone your repo.
By choosing public, only you will be able to see. You need to be admin to do this action
<x-spur.field id="public-repo-invalid" type="radio" invalid>
<x-spur.label>Public Repository</x-spur.label>
<x-spur.radio name="repository-privacy-invalid"/>
<x-spur.description>By choosing public, everyone will be able to see and clone your repo.</x-spur.description>
</x-spur.field>
<x-spur.field id="private-repo-invalid" type="radio" invalid>
<x-spur.label>Private Repository</x-spur.label>
<x-spur.radio name="repository-privacy-invalid"/>
<x-spur.description>By choosing public, only you will be able to see. You need to be admin to do this action</x-spur.description>
</x-spur.field><x-spur.radio />
<x-spur.radio color="indigo" />
<x-spur.radio color="blue" />
<x-spur.radio color="green" />
<x-spur.radio color="yellow" />
<x-spur.radio color="red" />You can use any custom html as radio button, by adding your desired HTML in the enclosed radio tag.
Spur provides a modifier to style the checked state of the radio `spur-checked`.
Can be used like so spur-checked:bg-red-300
<x-spur.radio value="300" id="300" name="options">
<div class="bg-white hover:bg-gray-50 spur-checked:border-brand-yellow/80 spur-checked:bg-brand-yellow/70 dark:bg-neutral-700 dark:hover:bg-neutral-50/20 p-2 cursor-pointer gap-1 flex rounded h-full transition border-neutral-200 dark:border-neutral-200/40 border justify-between">
<span class="dark:text-white spur-checked:text-white">300 GB</span>
</div>
</x-spur.radio>
<x-spur.radio value="500" id="500" name="options">
<div class="bg-white hover:bg-gray-50 spur-checked:border-brand-yellow/80 spur-checked:bg-brand-yellow/70 dark:bg-neutral-700 dark:hover:bg-neutral-50/20 p-2 cursor-pointer gap-1 flex rounded h-full transition border-neutral-200 dark:border-neutral-200/40 border justify-between">
<span class="dark:text-white spur-checked:text-white">500 GB</span>
</div>
</x-spur.radio>To be able to use the `spur-checked` modifier you would need to add it to tailwind.config.js
export default {
plugins: [
plugin(function({addVariant}) {
addVariant('spur-checked', '.group\\/spur-field:has(:checked) &')
})
]
}