Radio
Radio button component for single selection from a group of options
Basic Usage
Le radio group le plus basique avec des options simples:
<neura::radio.group label="Select Option" name="basic">
<neura::radio.item value="option1" label="Option 1" />
<neura::radio.item value="option2" label="Option 2" />
<neura::radio.item value="option3" label="Option 3" />
</neura::radio.group>With Descriptions
Add descriptions to options for more context:
Perfect for individuals. Includes 10GB storage and basic support.
Best for teams. Includes 100GB storage and priority support.
For large organizations. Includes unlimited storage and 24/7 support.
<neura::radio.item
value="basic"
label="Basic Plan"
description="Perfect for individuals. Includes 10GB storage."
/>Horizontal Layout
Display options horizontally with direction="horizontal":
<neura::radio.group
label="Select Size"
name="size"
direction="horizontal"
>
<neura::radio.item value="small" label="Small" />
<neura::radio.item value="medium" label="Medium" />
<neura::radio.item value="large" label="Large" />
</neura::radio.group>Variants
The radio component supports multiple visual variants:
Segmented Variant
Cards Variant
Pay with your credit card
Pay with PayPal account
Direct bank transfer
Pills Variant
<neura::radio.group variant="segmented" name="mode">...</neura::radio.group>
<neura::radio.group variant="cards" name="payment">...</neura::radio.group>
<neura::radio.group variant="pills" name="status">...</neura::radio.group>With Icons
Add icons to options to improve visual recognition:
<neura::radio.item
value="light"
label="Light"
icon="sun"
/>With Livewire
Use wire:model to sync with Livewire:
<neura::radio.group wire:model="selectedOption">
<neura::radio.item value="option1" label="Option 1" />
<neura::radio.item value="option2" label="Option 2" />
</neura::radio.group>
<!-- In your Livewire component -->
public $selectedOption = null;Default Value
Set a default value with checked="true":
<neura::radio.item
value="option1"
label="Option 1"
:checked="true"
/>Disabled State
Disable individual options or the entire group:
<neura::radio.item
value="option2"
label="Option 2"
:disabled="true"
/>Form Validation
Display validation errors with the error attribute:
Please select an option
<neura::radio.group
label="Required Selection"
name="option"
:required="true"
error="Please select an option"
>
<neura::radio.item value="option1" label="Option 1" />
</neura::radio.group>Use Cases
Subscription Plan Selection
Perfect for getting started
$9/mo
Best for professionals
$29/mo
For large teams
$99/mo
Best Practices
✓ Do
- Use clear and descriptive labels
- Add descriptions for complex options
- Use the appropriate variant based on context (segmented for toggles, cards for important choices)
- Group options logically
- Use a default value when it makes sense
✗ Don't
- Don't create too many options (max 5-7 recommended)
- Don't use ambiguous or too long labels
- Don't forget to validate selection on the server side
- Don't use radio buttons if the user can select multiple options (use checkbox instead)
Properties
Radio Group Properties
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | '' | Radio button group label |
| name | string | auto | Group name (automatically detected from wire:model or x-model) |
| direction | string | 'vertical' | Display direction. Values: 'vertical', 'horizontal' |
| variant | string | 'default' | Visual variant. Values: 'default', 'segmented', 'cards', 'pills' |
| required | bool | false | Mark the group as required |
| error | string | '' | Error message to display |
| disabled | bool | false | Disable the entire group |
| indicator | bool | true | Display selection indicator |
Radio Item Properties
| Property | Type | Default | Description |
|---|---|---|---|
| value | mixed | required | Option value |
| label | string | required | Option label |
| description | string | '' | Additional option description |
| checked | bool | false | Select this option by default |
| disabled | bool | false | Disable this option |
| icon | string | '' | Icon name to display (works with segmented and cards variants) |