Radio Group

Renders a group of <input type="radio"> elements from an options array, allowing a single selection. Uses <legend> for the label instead of <label>.

Class: PinkCrab\Form_Components\Element\Field\Group\Radio_Group
Make helper: Make::radio_group( 'name', fn(Radio_Group $f) => $f->... )


Basic Usage

$this->component( new Radio_Group_Component(
		Radio_Group::make( 'size' )
			->label( 'Size' )
			->options( array(
				'small'  => 'Small',
				'medium' => 'Medium',
				'large'  => 'Large',
			) )
	) )

Basic

Generated HTML
<div id="form-field_size" class="pc-form__element pc-form__element--radio_group">
    <legend>Size</legend>
        <label class="radio-group__option">
            <input type="radio" name="size" value="small" /> Small </label>
            <label class="radio-group__option">
                <input type="radio" name="size" value="medium" /> Medium </label>
                <label class="radio-group__option">
                    <input type="radio" name="size" value="large" /> Large </label>
                </div>

Using Make Helper

use PinkCrab\Form_Components\Util\Make;

$this->component( Make::radio_group( 'gender', fn( $f ) => $f
    ->label( 'Gender' )
    ->options( array(
        'male'   => 'Male',
        'female' => 'Female',
        'other'  => 'Other',
    ) )
) );

Methods

label( string $label )

Sets the visible label text above the radio group. Rendered as a <legend> element.

Radio_Group::make( 'gender' )->label( 'Gender' )
Generated HTML
<div id="form-field_gender" class="pc-form__element pc-form__element--radio_group">
    <legend>Gender</legend>
</div>

options( array $options )

Sets the available radio buttons as a value => label associative array.

Radio_Group::make( 'plan' )
    ->label( 'Plan' )
    ->options( array(
        'free'       => 'Free',
        'pro'        => 'Professional',
        'enterprise' => 'Enterprise',
    ) )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
    <legend>Plan</legend>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="free" />
        Free
    </label>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="pro" />
        Professional
    </label>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="enterprise" />
        Enterprise
    </label>
</div>

selected( string $selected )

Sets which radio button is selected by passing a single value string.

Radio_Group::make( 'plan' )
			->label( 'Plan' )
			->options( array(
				'free' => 'Free',
				'pro'  => 'Professional',
				'ent'  => 'Enterprise',
			) )
			->selected( 'pro' )

selected

Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
    <legend>Plan</legend>
        <label class="radio-group__option">
            <input type="radio" name="plan" value="free" /> Free </label>
            <label class="radio-group__option">
                <input type="radio" name="plan" value="pro" checked /> Professional </label>
                <label class="radio-group__option">
                    <input type="radio" name="plan" value="ent" /> Enterprise </label>
                </div>

set_existing( mixed $value )

Sets the selected value from existing data. Accepts a single value.

Radio_Group::make( 'plan' )
    ->label( 'Plan' )
    ->options( array( 'free' => 'Free', 'pro' => 'Professional' ) )
    ->set_existing( 'free' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
    <legend>Plan</legend>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="free" checked />
        Free
    </label>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="pro" />
        Professional
    </label>
</div>

is_selected( string $value )

Check if a specific radio value is currently selected.

$group = Radio_Group::make( 'plan' )
    ->options( array( 'free' => 'Free', 'pro' => 'Professional' ) )
    ->selected( 'pro' );

$group->is_selected( 'pro' );  // true
$group->is_selected( 'free' ); // false

required( bool $required = true )

Marks the field as required. The label displays a * indicator via CSS.

Radio_Group::make( 'plan' )
    ->label( 'Plan' )
    ->options( array( 'free' => 'Free', 'pro' => 'Professional' ) )
    ->required( true )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
    <legend>Plan</legend>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="free" />
        Free
    </label>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="pro" />
        Professional
    </label>
</div>

disabled( bool $disabled = true )

Disables the entire radio group. Each individual radio button receives the disabled attribute.

Radio_Group::make( 'locked_choice' )
			->label( 'Status' )
			->options( array(
				'active'   => 'Active',
				'inactive' => 'Inactive',
			) )
			->selected( 'active' )
			->disabled( true )

disabled

Generated HTML
<div id="form-field_locked_choice" class="pc-form__element pc-form__element--radio_group">
    <legend>Status</legend>
        <label class="radio-group__option">
            <input type="radio" name="locked_choice" value="active" checked disabled /> Active </label>
            <label class="radio-group__option">
                <input type="radio" name="locked_choice" value="inactive" disabled /> Inactive </label>
            </div>

error_notification( string $message )

Displays an error message below the group.

Radio_Group::make( 'required_choice' )
			->label( 'Shipping Method' )
			->options( array(
				'standard' => 'Standard (3-5 days)',
				'express'  => 'Express (1-2 days)',
				'next_day' => 'Next Day',
			) )
			->error_notification( 'Please select a shipping method.' )

notification

Generated HTML
<div id="form-field_required_choice" class="pc-form__element pc-form__element--radio_group pc-form__element pc-form__element--radio_group notification-error">
    <legend>Shipping Method</legend>
        <label class="radio-group__option">
            <input type="radio" name="required_choice" value="standard" /> Standard (3-5 days) </label>
            <label class="radio-group__option">
                <input type="radio" name="required_choice" value="express" /> Express (1-2 days) </label>
                <label class="radio-group__option">
                    <input type="radio" name="required_choice" value="next_day" /> Next Day </label>
                    <div class="pc-form__notification pc-form__notification--error">Please select a shipping method.</div>
                    </div>

warning_notification( string $message )

Displays a warning message below the group.

Radio_Group::make( 'plan' )
    ->label( 'Plan' )
    ->options( array( 'free' => 'Free', 'pro' => 'Professional' ) )
    ->warning_notification( 'Plan cannot be downgraded later.' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group notification-warning">
    <legend>Plan</legend>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="free" />
        Free
    </label>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="pro" />
        Professional
    </label>
    <div class="pc-form__notification pc-form__notification--warning">Plan cannot be downgraded later.</div>
</div>

success_notification( string $message )

Displays a success message below the group.

Radio_Group::make( 'plan' )
    ->label( 'Plan' )
    ->options( array( 'free' => 'Free', 'pro' => 'Professional' ) )
    ->selected( 'pro' )
    ->success_notification( 'Plan confirmed.' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group notification-success">
    <legend>Plan</legend>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="free" />
        Free
    </label>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="pro" checked />
        Professional
    </label>
    <div class="pc-form__notification pc-form__notification--success">Plan confirmed.</div>
</div>

info_notification( string $message )

Displays an info message below the group.

Radio_Group::make( 'plan' )
    ->label( 'Plan' )
    ->options( array( 'free' => 'Free', 'pro' => 'Professional' ) )
    ->info_notification( 'You can change your plan at any time.' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group notification-info">
    <legend>Plan</legend>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="free" />
        Free
    </label>
    <label class="radio-group__option">
        <input type="radio" name="plan" value="pro" />
        Professional
    </label>
    <div class="pc-form__notification pc-form__notification--info">You can change your plan at any time.</div>
</div>

pre_description( string $description )

Sets a description or hint displayed before the radio options.

Radio_Group::make( 'priority' )
    ->label( 'Priority' )
    ->pre_description( 'Choose one option.' )

post_description( string $description )

Sets a description or help text displayed after the radio options, before any notification.

Radio_Group::make( 'priority' )
    ->label( 'Priority' )
    ->post_description( 'This affects response time.' )

before( string $html ) / after( string $html )

HTML content before or after the radio group within the wrapper.

Radio_Group::make( 'payment' )
			->label( 'Payment Method' )
			->options( array(
				'card'   => 'Credit Card',
				'paypal' => 'PayPal',
				'bank'   => 'Bank Transfer',
			) )
			->before( '<span style="color:#6b7280;font-size:13px;">Select payment method:</span>' )
			->after( '<span style="color:#6b7280;font-size:13px;">All payments are processed securely.</span>' )

before/after

Generated HTML
<div id="form-field_payment" class="pc-form__element pc-form__element--radio_group">
    <span style="color:#6b7280;font-size:13px">Select payment method:</span>
        <legend>Payment Method</legend>
            <label class="radio-group__option">
                <input type="radio" name="payment" value="card" /> Credit Card </label>
                <label class="radio-group__option">
                    <input type="radio" name="payment" value="paypal" /> PayPal </label>
                    <label class="radio-group__option">
                        <input type="radio" name="payment" value="bank" /> Bank Transfer </label>
                        <span style="color:#6b7280;font-size:13px">All payments are processed securely.</span>
                        </div>

id( string $id )

Sets a custom HTML id on the radio group element.

Radio_Group::make( 'plan' )
    ->id( 'my-custom-group-id' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
</div>

wrapper_id( string $id )

Sets a custom HTML id on the wrapper div.

Radio_Group::make( 'plan' )
    ->wrapper_id( 'my-custom-wrapper-id' )
Generated HTML
<div id="my-custom-wrapper-id" class="pc-form__element pc-form__element--radio_group">
</div>

data( string $key, string $value )

Adds a data-* attribute to the radio group element.

Radio_Group::make( 'plan' )
    ->data( 'pricing', 'dynamic' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
</div>

wrapper_data( string $key, string $value )

Adds a data-* attribute to the wrapper div.

Radio_Group::make( 'plan' )
    ->wrapper_data( 'section', 'billing' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group" data-section="billing">
</div>

add_class( string $class )

Adds a CSS class to the radio group element.

Radio_Group::make( 'plan' )
    ->add_class( 'my-group-class' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
</div>

add_wrapper_class( string $class )

Adds a CSS class to the wrapper div.

Radio_Group::make( 'plan' )
    ->add_wrapper_class( 'my-wrapper-class' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group my-wrapper-class">
</div>

show_wrapper( bool $show = true )

Controls whether the wrapping <div> is rendered.

Radio_Group::make( 'plan' )
    ->options( array( 'free' => 'Free', 'pro' => 'Professional' ) )
    ->show_wrapper( false )
Generated HTML
<label class="radio-group__option">
    <input type="radio" name="plan" value="free" />
    Free
</label>
<label class="radio-group__option">
    <input type="radio" name="plan" value="pro" />
    Professional
</label>

attribute( string $key, mixed $value )

Sets an arbitrary HTML attribute on the radio group.

Radio_Group::make( 'plan' )
    ->attribute( 'aria-label', 'Select your plan' )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
</div>

attributes( array $attrs )

Sets multiple arbitrary HTML attributes at once.

Radio_Group::make( 'plan' )
    ->attributes( array(
        'title'    => 'Plan selection',
        'tabindex' => '3',
    ) )
Generated HTML
<div id="form-field_plan" class="pc-form__element pc-form__element--radio_group">
</div>

style( Style $style )

Sets a custom style for the field, overriding the default.

use PinkCrab\Form_Components\Style\Default_Style;

Radio_Group::make( 'plan' )
    ->style( new Default_Style() )

Traits

Trait Methods
Label label(), get_label(), has_label()
Options options(), get_options()
Notification error_notification(), warning_notification(), success_notification(), info_notification()
Disabled disabled(), is_disabled()
Required required(), is_required()
Description pre_description(), post_description(), get_pre_description(), get_post_description(), has_pre_description(), has_post_description()

This site uses Just the Docs, a documentation theme for Jekyll.