Documentation

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

Text

Description

Purpose: A text-field is intended for entering short single-line texts.
Composition: Text fields will render an input-tag with type="text".
Effect: Text inputs are restricted to one line of text.

Rivals

numeric field: Use a numeric field if users should input numbers.
alphabet field: Use an alphabet field if the user should input single letters.

Rules

Usage

Text Input MUST NOT be used for choosing from predetermined options.
Text input MUST NOT be used for numeric input, a Numeric Field is to be used instead.
Text Input MUST NOT be used for letter-only input, an Alphabet Field is to be used instead.

Interaction

Text Input MUST limit the number of characters, if a certain length of text-input may not be exceeded (e.g. due to database-limitations).

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Text;
 
/**
 * Example show how to create and render a basic text input field and attach it to a
 * form. This example does not contain any data processing.
 */
function base()
{
    //Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Step 1: Define the text input field
    $text_input = $ui->input()->field()->text("Basic Input", "Just some basic input");
 
    //Step 2: Define the form and attach the section.
    $form = $ui->input()->container()->form()->standard("#", [$text_input]);
 
    //Step 4: Render the form with the text input field
    return $renderer->render($form);
}

Example 2: Disabled

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Text;
 
/**
 * Example show how to create and render a disabled text input field and attach it to a
 * form. This example does not contain any data processing.
 */
function disabled()
{
    //Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Step 1: Define the text input field
    $text_input = $ui->input()->field()->text("Disabled Input", "Just some disabled input")->withDisabled(true);
 
    //Step 2: Define the form and attach the section.
    $form = $ui->input()->container()->form()->standard("#", [$text_input]);
 
    //Step 4: Render the form with the text input field
    return $renderer->render($form);
}

Example 3: With error

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Text;
 
/**
 * Example show how to create and render a basic text input field with an error
 * attached to it. This example does not contain any data processing.
 */
function with_error()
{
    //Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Step 1: Define the text input field
    $text_input = $ui->input()->field()->text("Basic Input", "Just some basic input
    with some error attached.")
        ->withError("Some error");
 
    //Step 2: Define the form and attach the section.
    $form = $ui->input()->container()->form()->standard("#", [$text_input]);
 
    //Step 4: Render the form with the text input field
    return $renderer->render($form);
}

Example 4: With value

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Text;
 
/**
 * Example show how to create and render a basic text input field with an error
 * attached to it. This example does not contain any data processing.
 */
function with_value()
{
    //Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Step 1: Define the text input field and attach some default value
    $text_input = $ui->input()->field()->text("Basic Input", "Just some basic input
    with some default value.")
        ->withValue("Default Value");
 
    //Step 2: Define the form and attach the section.
    $form = $ui->input()->container()->form()->standard("#", [$text_input]);
 
    //Step 4: Render the form with the text input field
    return $renderer->render($form);
}

Relations

Parents

UIComponent
Input
Field