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
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();
A simple textarea with custom rows
echo ThemedComponent::make('form/textarea')
->name('message')
->placeholder('Enter your message')
->rows(4)
->render();
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();
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();
The Twig template file for the Textarea component
{# 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>