PHPackages                             mrshanebarron/radio-group - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mrshanebarron/radio-group

ActiveLibrary[Utility & Helpers](/categories/utility)

mrshanebarron/radio-group
=========================

Radio group component for Laravel - supports Livewire and Vue

v1.0.2(4mo ago)08MITPHPPHP ^8.1

Since Dec 14Pushed 4mo agoCompare

[ Source](https://github.com/mrshanebarron/radio-group)[ Packagist](https://packagist.org/packages/mrshanebarron/radio-group)[ RSS](/packages/mrshanebarron-radio-group/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (3)Dependencies (1)Versions (4)Used By (0)

Radio Group
===========

[](#radio-group)

A styled radio button group component for Laravel applications. Supports various layouts and custom styling. Works with Livewire and Vue 3.

Installation
------------

[](#installation)

```
composer require mrshanebarron/radio-group
```

Livewire Usage
--------------

[](#livewire-usage)

### Basic Usage

[](#basic-usage)

```

```

### With Descriptions

[](#with-descriptions)

```

```

### Horizontal Layout

[](#horizontal-layout)

```

```

### Livewire Props

[](#livewire-props)

PropTypeDefaultDescription`wire:model`string-Selected value`options`arrayrequiredRadio options`layout`string`'vertical'``vertical` or `horizontal``name`stringautoInput name attributeVue 3 Usage
-----------

[](#vue-3-usage)

### Setup

[](#setup)

```
import { SbRadioGroup } from './vendor/sb-radio-group';
app.component('SbRadioGroup', SbRadioGroup);
```

### Basic Usage

[](#basic-usage-1)

```

import { ref } from 'vue';

const selected = ref('option1');
const options = {
  option1: 'Option 1',
  option2: 'Option 2',
  option3: 'Option 3'
};

```

### With Descriptions

[](#with-descriptions-1)

```

import { ref } from 'vue';

const plan = ref('basic');
const plans = [
  { value: 'basic', label: 'Basic', description: 'For individuals - $9/mo' },
  { value: 'pro', label: 'Pro', description: 'For teams - $29/mo' },
  { value: 'enterprise', label: 'Enterprise', description: 'Custom pricing' }
];

```

### Horizontal Layout

[](#horizontal-layout-1)

```

import { ref } from 'vue';

const size = ref('md');
const sizes = {
  sm: 'Small',
  md: 'Medium',
  lg: 'Large',
  xl: 'Extra Large'
};

```

### Card Style

[](#card-style)

```

import { ref } from 'vue';

const shipping = ref('standard');
const shippingOptions = [
  { value: 'standard', label: 'Standard', description: '5-7 business days - Free' },
  { value: 'express', label: 'Express', description: '2-3 business days - $9.99' },
  { value: 'overnight', label: 'Overnight', description: 'Next business day - $24.99' }
];

```

### Vue Props

[](#vue-props)

PropTypeDefaultDescription`modelValue`String-Selected value`options`Object/ArrayrequiredRadio options`layout`String`'vertical'`Layout direction`variant`String`'default'`Style variant`name`StringautoInput name### Events

[](#events)

EventPayloadDescription`update:modelValue``string`Selection changedOptions Format
--------------

[](#options-format)

```
// Simple object format
const options = {
  value1: 'Label 1',
  value2: 'Label 2'
};

// Array with descriptions
const options = [
  { value: 'v1', label: 'Label 1', description: 'Description' },
  { value: 'v2', label: 'Label 2', description: 'Description' }
];
```

Features
--------

[](#features)

- **Multiple Layouts**: Vertical or horizontal
- **Descriptions**: Additional text per option
- **Card Variant**: Rich card-style options
- **Accessible**: Proper radio semantics
- **Keyboard**: Arrow key navigation

Styling
-------

[](#styling)

Uses Tailwind CSS:

- Blue accent color
- Focus ring on selection
- Hover states
- Disabled styling

Requirements
------------

[](#requirements)

- PHP 8.1+
- Laravel 10, 11, or 12
- Tailwind CSS 3.x

License
-------

[](#license)

MIT License

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance74

Regular maintenance activity

Popularity4

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

3

Last Release

148d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7a38dc9b4ccc180ee3e9df8879f8747ea9dbf36812c6546827fe504fa8993eb8?d=identicon)[mrshanebarron](/maintainers/mrshanebarron)

---

Tags

laravellivewireforminputvueradio

### Embed Badge

![Health badge](/badges/mrshanebarron-radio-group/health.svg)

```
[![Health](https://phpackages.com/badges/mrshanebarron-radio-group/health.svg)](https://phpackages.com/packages/mrshanebarron-radio-group)
```

###  Alternatives

[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)[vildanbina/livewire-tabs

Laravel Livewire Tab Form component

504.6k](/packages/vildanbina-livewire-tabs)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

116.6k](/packages/tomshaw-electricgrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)