Form Textarea Component Documentation

 Textarea Component
   - name: string - Textarea name attribute (required)
   - value: string - Textarea content (optional)
   - rows: integer - Number of visible text lines (default: 3)
   - placeholder: string - Placeholder text (optional)
   - required: boolean - Whether the field is required (default: false)
   - disabled: boolean - Whether the field is disabled (default: false)
   - readonly: boolean - Whether the field is readonly (default: false)
   - class: string - Additional CSS classes (optional)
   - id: string - Textarea ID attribute (optional, defaults to name)

All available options for the Textarea component

All available options for the Textarea component


    ThemedComponent::make("form/textarea")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes (optional)
	->disabled('value') //boolean - Whether the field is disabled (default: false)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->name('value') //string - Textarea name attribute (required)
	->placeholder('value') //string - Placeholder text (optional)
	->readonly('value') //boolean - Whether the field is readonly (default: false)
	->required('value') //boolean - Whether the field is required (default: false)
	->rows('value') //integer - Number of visible text lines (default: 3)
	->value('value') //string - Textarea content (optional)
	->render();

Basic Textarea

A simple textarea with custom rows

echo ThemedComponent::make('form/textarea')
    ->name('message')
    ->placeholder('Enter your message')
    ->rows(4)
    ->render();

Textarea with Value

A textarea with pre-filled content

echo ThemedComponent::make('form/textarea')
    ->name('description')
    ->value('This is a pre-filled textarea with some default content.')
    ->rows(3)
    ->render();

Textarea States

Different textarea states: required, disabled, and readonly

// Required textarea
echo ThemedComponent::make('form/textarea')
    ->name('required-textarea')
    ->placeholder('This field is required')
    ->required(true)
    ->render();

// Disabled textarea
echo ThemedComponent::make('form/textarea')
    ->name('disabled-textarea')
    ->value('This textarea is disabled')
    ->disabled(true)
    ->render();

// Readonly textarea
echo ThemedComponent::make('form/textarea')
    ->name('readonly-textarea')
    ->value('This textarea is readonly')
    ->readonly(true)
    ->render();

Textarea component template

The Twig template file for the Textarea component

Content of the textarea.twig file
{# Textarea Component
   - name: string - Textarea name attribute (required)
   - value: string - Textarea content (optional)
   - rows: integer - Number of visible text lines (default: 3)
   - placeholder: string - Placeholder text (optional)
   - required: boolean - Whether the field is required (default: false)
   - disabled: boolean - Whether the field is disabled (default: false)
   - readonly: boolean - Whether the field is readonly (default: false)
   - class: string - Additional CSS classes (optional)
   - id: string - Textarea ID attribute (optional, defaults to name)
#}

<textarea
    name="{{ content.name }}"
    id="{{ content.id|default(content.name) }}"
    rows="{{ content.rows|default(3) }}"
    {% if content.placeholder %}placeholder="{{ content.placeholder }}"{% endif %}
    {% if content.required %}required{% endif %}
    {% if content.disabled %}disabled{% endif %}
    {% if content.readonly %}readonly{% endif %}
    class="form-control {{ content.class|default('') }}"
>{{ content.value|default('') }}</textarea>