Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Select

Description

Purpose: A select is used to allow users to pick among a number of options.
Composition: Select field will render a select-tag with a number of options. First option contains the string "-" and it is selectable depending on the required property.
Effect: Only one option is selectable. If the property required is set as true, the first option will be hidden after clicking on the select input at the first time.

Rivals

Checkbox field: Use a checkbox field for a binary yes/no choice.
Radio buttons: Use radio buttons when the alternatives matter. When is wanted to user to see what they are not choosing. If it is a long list or the alternatives are not that important, use a select.

Rules

Usage

Select Input MAY be used for choosing from predetermined options.

Interaction

Only one option is selectable.
First Option MAY be selectable when the field is not required.

Example 1: Base

No result yet.

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Select;
 
/**
 * Base example showing how to plug a Select into a form
 */
function base()
{
    //Step 0: Declare dependencies
    global $DIC;
 
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
    $ctrl = $DIC->ctrl();
 
    //Define the options.
    $options = array(
        "1" => "Type 1",
        "2" => "Type 2",
        "3" => "Type 3",
        "4" => "Type 4",
    );
 
    //Step 1: define the select
    $select = $ui->input()->field()->select("Choose an Option", $options, "This is the byline text");
 
    //Step 2: define form and form actions
    $form = $ui->input()->container()->form()->standard('#', [$select]);
 
    //Step 3: implement some form data processing.
    if ($request->getMethod() == "POST") {
        $form = $form->withRequest($request);
        $result = $form->getData();
    } else {
        $result = "No result yet.";
    }
 
    //Step 4: Render the select with the enclosing form.
    return
        "<pre>" . print_r($result, true) . "</pre><br/>" .
        $renderer->render($form);
}

Example 2: Disabled

No result yet.

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Select;
 
/**
 * Example showing how to plug a disabled Select into a form
 */
function disabled()
{
    //Step 0: Declare dependencies
    global $DIC;
 
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
    $ctrl = $DIC->ctrl();
 
    //Define the options.
    $options = array(
        "1" => "Type 1",
        "2" => "Type 2",
        "3" => "Type 3",
        "4" => "Type 4",
    );
 
    //Step 1: define the select
    $select = $ui->input()->field()->select("Cannot choose an Option", $options, "This is the byline text")
        ->withDisabled(true);
 
    //Step 2: define form and form actions
    $form = $ui->input()->container()->form()->standard('#', [$select]);
 
    //Step 3: implement some form data processing.
    if ($request->getMethod() == "POST") {
        $form = $form->withRequest($request);
        $result = $form->getData();
    } else {
        $result = "No result yet.";
    }
 
    //Step 4: Render the select with the enclosing form.
    return
        "<pre>" . print_r($result, true) . "</pre><br/>" .
        $renderer->render($form);
}

Example 3: With required

No result yet.

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Select;
 
/**
 * Base example showing how to plug a Select into a form
 */
function with_required()
{
    //Step 0: Declare dependencies
    global $DIC;
 
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
    $ctrl = $DIC->ctrl();
 
    //Define the options.
    $options = array(
        "1" => "Type 1",
        "2" => "Type 2",
        "3" => "Type 3",
        "4" => "Type 4",
    );
 
    //Step 1: define the select
    $select = $ui->input()->field()->select("Choose an Option", $options, "This is the byline text")->withRequired(true);
 
    //Step 2: define form and form actions
    $form = $ui->input()->container()->form()->standard('#', [$select]);
 
    //Step 3: implement some form data processing.
    if ($request->getMethod() == "POST") {
        $form = $form->withRequest($request);
        $result = $form->getData();
    } else {
        $result = "No result yet.";
    }
 
    //Step 4: Render the select with the enclosing form.
    return
        "<pre>" . print_r($result, true) . "</pre><br/>" .
        $renderer->render($form);
}

Relations

Parents

UIComponent
Input
Field