X-Splade-Radio Component
The Radio Component behaves the same as checkboxes, except the show-errors
attribute defaults to false
as you almost always want to wrap multiple radio elements in a x-splade-group
.
You can group checkbox and radio elements on the same horizontal row by adding an inline
attribute.
<x-splade-group name="notification_channel" label="Preferred notification channel" inline> <x-splade-radio name="notification_channel" value="mail" label="Mail" /> <x-splade-radio name="notification_channel" value="slack" label="Slack" /></x-splade-group>
If you still want to show validation errors on the Radio component, you can use the show-errors
attribute:
<x-splade-radio name="theme" value="dark" label="Dark theme" :show-errors="true" /><x-splade-radio name="theme" value="light" label="Light theme" :show-errors="true" />
X-Splade-Radios Component
You can shorten and rewrite the example above with the x-splade-radios
component that automatically renders the group and radios based on a key-value array. This component behaves similarly to the select component.
<x-splade-radios name="notification_channel" label="Preferred notification channel" :options="$channels" />