- Getting Started
- The Basics
- Concepts
- SuperNative
-
EDGE Components
- Introduction
- Activity Indicator
- Badge
- Bottom Navigation
- Bottom Sheet
- Button
- Button Group
- Canvas
- Carousel
- Checkbox
- Chip
- Column
- Divider
- Gesture Area
- Icon
- Icons
- Image
- Layout & Styling
- List
- Menus
- Modal
- Pressable
- Progress Bar
- Radio Group
- Row
- Scroll View
- Select
- Shapes
- Side Navigation
- Slider
- Spacer
- Stack
- Tab Row
- Text
- Text Input
- Toggle
- Top Bar
- Virtual List
- Web View
- Plugins
- Testing
- Architecture
You're viewing pre-release documentation — version 4.x is in beta
Features, APIs and behaviour may change before the stable release. View the stable version (3.x)
Radio Group
Overview#
A single-choice container holding <native:radio> children. The group owns the selection; each child declares its
own value and label.
Per Model 3, all colors come from theme tokens.
Copied!
<native:radio-group native:model="plan" label="Choose a plan"> <native:radio value="free" label="Free" /> <native:radio value="pro" label="Pro" /> <native:radio value="team" label="Team" /></native:radio-group>
Props (Group)#
value- Currently selectedvaluestring (optional). Usenative:modelfor two-way bindinglabel- Label text rendered above the group (optional, string)disabled- Disable the entire group (optional, boolean, default:false)a11y-label- Accessibility label (optional)a11y-hint- Accessibility hint (optional)
Events#
@change- Livewire method called when the selection changes. Receives the new value as a parameter
Two-way Binding#
native:model binds the group's selected value to a Livewire string property:
Copied!
<native:radio-group native:model="plan"> <native:radio value="free" label="Free" /> <native:radio value="pro" label="Pro" /></native:radio-group>
Children#
<native:radio> declares a single option:
value- The option's value (required, string). Must be unique within the grouplabel- Inline label (optional, string)disabled- Disable just this option (optional, boolean, default:false)
Examples#
Plan picker#
Copied!
<native:radio-group native:model="plan" label="Choose a plan"> <native:radio value="free" label="Free — $0/mo" /> <native:radio value="pro" label="Pro — $9/mo" /> <native:radio value="team" label="Team — $29/mo" /> <native:radio value="custom" label="Enterprise (contact sales)" disabled /></native:radio-group>
Manual handler#
Copied!
<native:radio-group :value="$shippingMethod" @change="setShipping" label="Shipping"> <native:radio value="standard" label="Standard (5-7 days)" /> <native:radio value="express" label="Express (1-2 days)" /> <native:radio value="pickup" label="Store pickup" /></native:radio-group>
Element#
Copied!
use Nativephp\NativeUi\Elements\RadioGroup;use Nativephp\NativeUi\Elements\Radio; RadioGroup::make( Radio::make('free')->label('Free'), Radio::make('pro')->label('Pro'), Radio::make('team')->label('Team'),) ->value($plan) ->label('Choose a plan') ->onChange('setPlan');
RadioGroup methods#
make(Element ...$children)- Create a group with radio childrenvalue(string $selectedValue)- Currently selected valuelabel(string $text)- Group labeldisabled(bool $value = true)- Disable the groupa11yLabel(string $value),a11yHint(string $value)- AccessibilitysyncMode(string $mode)- Set bynative:modelmodifiersonChange(string $method)- Livewire method invoked on selection change
Radio methods#
make(string $value = '')- Create a radio with a valuelabel(string $label)- Inline labeldisabled(bool $value = true)- Disable the option
Plugin Dev Kit
Build native plugins with
Claude Code
Learn More
NativePHP Ultra
All NativePHP plugins, teams & priority support from
$35/mo
Learn More
The Vibes
The unofficial Laracon US
Day 3
Grab Your Spot
Only 100 tickets!
The Masterclass
Go from zero to
published app
in no time
in no time
Learn More
Early Bird Pricing