Kern Component Library GitHub

Textarea

Multi-line form control with label/help/error handling via the shared field wrapper.

Examples

Default preview

Default + help text

These notes are visible to your team only.

Error + disabled

Message must be at least 20 characters.

Disabled example for review mode. 

<div class="space-y-8">

    <section class="space-y-4">

        {{ partial:docs/components/label content="Default + help text" }}

        <div class="grid gap-4 md:grid-cols-2">

            {{ partial:components/forms/textarea name="summary" placeholder="Write a short summary" }}

                {{ slot:label }}Summary{{ /slot:label }}

            {{ /partial:components/forms/textarea }}



            {{ partial:components/forms/textarea name="notes" rows="5" placeholder="Internal notes" }}

                {{ slot:label }}Notes{{ /slot:label }}

                {{ slot:help }}These notes are visible to your team only.{{ /slot:help }}

            {{ /partial:components/forms/textarea }}

        </div>

    </section>



    <section class="space-y-4">

        {{ partial:docs/components/label content="Error + disabled" }}

        <div class="grid gap-4 md:grid-cols-2">

            {{ partial:components/forms/textarea name="message" rows="4" error="true" value="Hi" }}

                {{ slot:label }}Message{{ /slot:label }}

                {{ slot:error }}Message must be at least 20 characters.{{ /slot:error }}

            {{ /partial:components/forms/textarea }}



            {{ partial:components/forms/textarea name="locked" rows="4" value="This content is read-only." disabled="true" }}

                {{ slot:label }}Locked field{{ /slot:label }}

                {{ slot:help }}Disabled example for review mode.{{ /slot:help }}

            {{ /partial:components/forms/textarea }}

        </div>

    </section>

</div>

Props

Name Type Default Description
name string Name attribute used for form submissions (and id when present)
value string Textarea value
placeholder string Placeholder text
rows integer 4 Initial textarea row count
disabled boolean false Disabled state
error boolean false Enables destructive visual state
class string Additional classes merged via tw_merge (root element only)

Source

{{#

    @name Textarea

    @desc Multi-line form control with label/help/error handling via the shared field wrapper.

    @param name string - Name attribute used for form submissions (and id when present)

    @param value string - Textarea value

    @param placeholder string - Placeholder text

    @param rows integer [4] - Initial textarea row count

    @param disabled boolean [false] - Disabled state

    @param error boolean [false] - Enables destructive visual state

    @param class string - Additional classes merged via tw_merge (root element only)

#}}

{{ _label_slot = slot:label }}

{{ _help_slot = slot:help }}

{{ _error_slot = slot:error }}

{{ _field_id = name ?? '' }}

{{ _rows = rows ?? 4 }}

{{ _textarea_classes = 'min-h-24 w-full resize-y bg-transparent px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:text-muted-foreground'

 | tw_merge }}

{{ partial:components/forms/_field-wrapper for="{_field_id}" error="{error}" disabled="{disabled}" class="{class}" }}

    {{ if _label_slot }}

        {{ slot:label }}

            {{ _label_slot }}

        {{ /slot:label }}

    {{ /if }}

    {{ if _help_slot }}

        {{ slot:help }}

            {{ _help_slot }}

        {{ /slot:help }}

    {{ /if }}

    {{ if _error_slot }}

        {{ slot:error }}

            {{ _error_slot }}

        {{ /slot:error }}

    {{ /if }}

    <textarea

        class="{{ _textarea_classes }}"

        {{ if name }}name="{{ name }}" id="{{ _field_id }}"{{ /if }}

        rows="{{ _rows }}"

        placeholder="{{ placeholder }}"

        {{ if disabled }}disabled{{ /if }}

        {{ if error }}aria-invalid="true"{{ /if }}

    >

{{ value }}</textarea

    >

{{ /partial:components/forms/_field-wrapper }}

Dependencies

Packages

marcorieser/tailwind-merge-statamic

composer require marcorieser/tailwind-merge-statamic

Internal dependencies