Form.radio ViewHelper <f:form.radio>
ViewHelper which creates a simple radio button
<input type="radio">.
Go to the source code of this ViewHelper: Form\RadioViewHelper.php (GitHub).
Tip
When using multiple related radio buttons, wrap them
in a <fieldset> with a <legend>, which helps screen readers understand
the purpose of the group and improves overall accessibility. It also gives
your form better semantic structure.
Table of content
Basic yes/no radio buttons tied to an action argument
The following shows two radio buttons, the one labeled "No" is preselected.
The controller action can then look like this:
<?php
declare(strict_types=1);
namespace MyVendor\MyExtension\Controller;
use Psr\Http\Message\ResponseInterface;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
class NewsletterController extends ActionController
{
public function orderNewsletterAction(
// If the checkbox is not checked, no argument is provided.
// Default to false
bool $orderNewsletter = false,
): ResponseInterface {
if ($orderNewsletter) {
// TODO: Newsletter ordering
}
return $this->htmlResponse();
}
}
Tip
You could ask the same question with a Single optional checkbox. The main difference is, when you have a preselected radio button, the radio button group cannot be disabled again, therefore the parameter is always supplied to the action.
Property mapping - Radio buttons bound to a model
The radio buttons from this example look the same as those from the previous
example, however an object of type User is now provided as parameter for
the Extbase action.
Then the controller action can look like this:
<?php
declare(strict_types=1);
namespace MyVendor\MyExtension\Controller;
use MyVendor\MyExtension\Domain\Model\User;
use Psr\Http\Message\ResponseInterface;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
class NewsletterController extends ActionController
{
public function orderNewsletterAction(
User $user,
): ResponseInterface {
if ($user->isOrderNewsletter()) {
// TODO: Newsletter ordering
}
return $this->htmlResponse();
}
}
<?php
declare(strict_types=1);
namespace MyVendor\MyExtension\Domain\Model;
use TYPO3\CMS\Extbase\DomainObject\AbstractEntity;
class User extends AbstractEntity
{
protected bool $orderNewsletter = false;
public function isOrderNewsletter(): bool
{
return $this->orderNewsletter;
}
public function setOrderNewsletter(bool $orderNewsletter): void
{
$this->orderNewsletter = $orderNewsletter;
}
}
Radio buttons with options from an array or query result
The form radio ViewHelper does not supply an argument that creates it from an array as you might have seen for the form select ViewHelper (Select field for selecting (persisted) models).
You can however just use the For ViewHelper <f:for> to iterate your items and display them one by one. If you use the objects uid for the key, the radio button can be matched to the model in use.
The Fluid template can be left unchanged even though we are dealing with a different data source:
<?php
declare(strict_types=1);
namespace MyVendor\MyExtension\Domain\Model;
use TYPO3\CMS\Extbase\DomainObject\AbstractEntity;
class PaymentMethod extends AbstractEntity implements \Stringable
{
protected string $title;
protected string $paymentIdentifier;
// Getters and setters
// If the model implement the __toString() method
// The result of that method is displayed in the select form
public function __toString(): string
{
return $this->title;
}
}
In the controller we can get all payment methods from the Repository now and pass it to the view as variable:
<?php
declare(strict_types=1);
namespace MyVendor\MyExtension\Controller;
use Psr\Http\Message\ResponseInterface;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
class UserController extends ActionController
{
public function __construct(
protected readonly PaymentMethodRepository $paymentMethodRepository,
) {}
public function paymentFormAction(): ResponseInterface
{
$paymentOptions = $this->paymentMethodRepository->findAll();
$this->view->assign('paymentOptions', $paymentOptions);
$this->view->assign('myPayment', 'visa');
return $this->htmlResponse();
}
public function selectPaymentAction(PaymentMethod $payment): ResponseInterface
{
// do something
return $this->redirect('show');
}
}
Tip
You can use the same model and controller as with Select field for selecting (persisted) models.
The integrator can choose to use a radio button or select element without that the backend has to be changed.
Multiple radio button groups
Only one radio button per group can be checked at a time. Each group has the same name or property.
Tip
Each group of related radio buttons should be wrapped in its own
<fieldset> with a <legend> to describe the purpose of the group.
This ensures that screen readers and other assistive technologies can correctly interpret the relationship between the options. It also improves the semantic structure and visual clarity of your form.
Arguments of the form radio ViewHelper
Allows arbitrary arguments
This ViewHelper allows you to pass arbitrary arguments not defined below
directly to the HTML tag created. This includes custom data- arguments.
additionalAttributes
-
- Type
- array
Additional tag attributes. They will be added directly to the resulting HTML tag.
aria
-
- Type
- array
Additional aria-* attributes. They will each be added with a "aria-" prefix.
checked
-
- Type
- bool
Specifies that the input element should be preselected
data
-
- Type
- array
Additional data-* attributes. They will each be added with a "data-" prefix.
errorClass
-
- Type
- string
- Default
- 'f3-form-error'
CSS class to set if there are errors for this ViewHelper
name
-
- Type
- string
Name of input tag
property
-
- Type
- string
Name of Object Property. If used in conjunction with <f:form object="...">, the "name" property will be ignored, while "value" can be used to specify a default field value instead of the object property value.
value
-
- Type
- string
- Required
- 1
Value of input tag. Required for radio buttons