Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Radio

Radio button, always used in groups. Each option shares the same wire:model and carries its own value. The id is auto-resolved as wiremodel-value (e.g. plan-free, plan-pro).

Basic usage

Pass the label as a prop. Use the default slot instead when it contains HTML. 

<x-wirestrap::radio
    wire:model="plan"
    value="free"
    label="Free"
/>

{{-- Rich label via default slot --}}
<x-wirestrap::radio ... >
    Pro - <strong>$12/mo</strong>
</x-wirestrap::radio>

Layout

Add inline to display options side by side, or reverse to place the radio on the right of the label. 

<x-wirestrap::radio ... inline />
<x-wirestrap::radio ... inline />
<x-wirestrap::radio ... inline />
<x-wirestrap::radio ... reverse />
<x-wirestrap::radio ... reverse />

Disabled

Disable individual options rather than the whole group when some choices are conditionally unavailable. 

<x-wirestrap::radio ... disabled />

Validation

All radios in a group share the same wire:model key, so without precaution the error message repeats on every option. Set :has-validation-message="false" on all but the last one to show it only once. 

{{-- Show the error message only on the last option --}}
<x-wirestrap::radio ... :has-validation-message="false" />

{{-- Suppress both the invalid class and the error message --}}
<x-wirestrap::radio ... :has-validation="false" />

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::radio

Prop Type Default Description
id string|null null Radio id. Auto-resolved from wire:model and value (e.g. plan-free).
label ComponentSlot|string|null null Label text or slot content. No label element is rendered when null.
inline bool false Inline layout for side-by-side options.
reverse bool false Place the radio on the right of the label.
disabled bool false Disable this option.
has-validation-message bool config Render the error message below this option. Set to false on all but the last option in a group.
has-validation bool config Apply the invalid class when the wire:model key has an error.
default-attributes array config Default HTML attributes merged onto the input element.
No results found
⭐ GitHub