-
Notifications
You must be signed in to change notification settings - Fork 0
group
Jacob Martella edited this page Feb 1, 2026
·
3 revisions
The Group component provides a way to create a group of radio buttons styled as a button group. It's useful for selecting a single option from a small set of choices in a compact, visually appealing format.
@php
$options = [
['id' => 'small', 'name' => 'Small'],
['id' => 'medium', 'name' => 'Medium'],
['id' => 'large', 'name' => 'Large']
];
@endphp
<x-artisanpack-group
label="Size"
wire:model="size"
:options="$options"
/>@php
$options = [
['id' => 'small', 'name' => 'Small'],
['id' => 'medium', 'name' => 'Medium'],
['id' => 'large', 'name' => 'Large']
];
@endphp
<x-artisanpack-group
label="Size"
wire:model="size"
:options="$options"
/><x-artisanpack-group
label="Size"
hint="Select the size for your product"
wire:model="size"
:options="$options"
/>@php
$colorOptions = [
['value' => 'red', 'label' => 'Red'],
['value' => 'green', 'label' => 'Green'],
['value' => 'blue', 'label' => 'Blue']
];
@endphp
<x-artisanpack-group
label="Color"
wire:model="color"
:options="$colorOptions"
optionValue="value"
optionLabel="label"
/>@php
$options = [
['id' => 'small', 'name' => 'Small'],
['id' => 'medium', 'name' => 'Medium', 'disabled' => true],
['id' => 'large', 'name' => 'Large']
];
@endphp
<x-artisanpack-group
label="Size"
wire:model="size"
:options="$options"
/><x-artisanpack-group
label="Size"
wire:model="size"
:options="$options"
class="btn-sm"
/><x-artisanpack-group
label="Size"
wire:model="size"
:options="$options"
required
/>
<!-- In your Livewire component -->
protected $rules = [
'size' => 'required',
];<x-artisanpack-group
label="Size"
wire:model="size"
:options="$options"
errorField="product_size"
/>| Prop | Type | Default | Description |
|---|---|---|---|
id |
string|null | null |
Optional ID for the group element |
label |
string|null | null |
Optional label for the group |
hint |
string|null | null |
Optional hint text displayed below the group |
hintClass |
string|null | 'fieldset-label' |
CSS class for the hint text |
optionValue |
string|null | 'id' |
The property to use as the value for each option |
optionLabel |
string|null | 'name' |
The property to use as the label for each option |
options |
Collection|array | new Collection() |
Collection or array of options to display in the group |
errorField |
string|null | null |
Custom field name for validation errors |
errorClass |
string|null | 'text-error' |
CSS class for error messages |
omitError |
boolean|null | false |
Whether to hide error messages |
firstErrorOnly |
boolean|null | false |
Whether to show only the first error message |
Each option in the options array or collection should have the following properties:
[
'id' => 'option_value', // The value of the option (or custom property specified by optionValue)
'name' => 'Option Label', // The label of the option (or custom property specified by optionLabel)
'disabled' => true // Optional, whether the option is disabled
]The Group component uses DaisyUI's join and button components for styling. The radio inputs are styled as buttons with the selected option highlighted.
-
fieldset- Container for the group -
fieldset-legend- Applied to the label -
fieldset-label- Applied to the hint text -
join- Container for the button group -
join-item btn- Applied to each radio button -
[&:checked]:btn-neutral- Applied to the selected radio button -
text-error- Applied to error messages
The Group component follows accessibility best practices:
- Uses semantic HTML with proper fieldset and legend elements
- Includes proper labeling for each option using aria-label
- Supports keyboard navigation
- Provides error messages for validation
- Includes required field indication