Radio Group
Get the Jump app
You'll need the free Jump app to preview this page on your device. Install it, then scan the code again.
Overview#
A single-choice container holding <native:radio> children. The group owns the selection; each child declares its
own value and label.
Per Material 3, all colors come from theme tokens.
@php $plan = 'pro'; @endphp <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>Here plan is a public string property on your component — the @php line stands in for
public string $plan = 'pro';.
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- Component 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 public string property on your component:
@php $billing = 'monthly'; @endphp <native:radio-group native:model="billing" label="Billing cadence"> <native:radio value="monthly" label="Monthly" /> <native:radio value="yearly" label="Yearly" /></native:radio-group> <native:text class="text-sm text-theme-on-surface-variant">Billed: {{ $billing }}</native:text>billing is a public string property on your component (the @php line stands in for
public string $billing = 'monthly';). Picking an option syncs the new value back automatically,
so the {{ $billing }} echo updates as soon as you tap a different option.
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)a11y-label- Accessibility label (optional)a11y-hint- Accessibility hint (optional)
Examples#
Plan picker#
@php $selectedPlan = 'free'; @endphp <native:radio-group native:model="selectedPlan" 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> <native:text class="text-sm text-theme-on-surface-variant">Current plan: {{ $selectedPlan }}</native:text>Manual handler#
When you need side effects beyond a simple property write, bind :value yourself and handle
@change — $shippingMethod is a public string property and setShipping() a public method on
your component, receiving the new value as its parameter:
<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#
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)- Component 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 optiona11yLabel(string $value),a11yHint(string $value)- Accessibility
in no time
