Kern Component Library GitHub 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. 

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

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

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

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

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

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

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

 8

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

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

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

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

13        </div>

14    </section>

15

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

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

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

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

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

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

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

23

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

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

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

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

28        </div>

29    </section>

30</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

 1{{#

 2    @name Textarea

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

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

 5    @param value string - Textarea value

 6    @param placeholder string - Placeholder text

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

 8    @param disabled boolean [false] - Disabled state

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

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

11#}}

12{{ _label_slot = slot:label }}

13{{ _help_slot = slot:help }}

14{{ _error_slot = slot:error }}

15{{ _field_id = name ?? '' }}

16{{ _rows = rows ?? 4 }}

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

18 | tw_merge }}

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

20    {{ if _label_slot }}

21        {{ slot:label }}

22            {{ _label_slot }}

23        {{ /slot:label }}

24    {{ /if }}

25    {{ if _help_slot }}

26        {{ slot:help }}

27            {{ _help_slot }}

28        {{ /slot:help }}

29    {{ /if }}

30    {{ if _error_slot }}

31        {{ slot:error }}

32            {{ _error_slot }}

33        {{ /slot:error }}

34    {{ /if }}

35    <textarea

36        class="{{ _textarea_classes }}"

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

38        rows="{{ _rows }}"

39        placeholder="{{ placeholder }}"

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

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

42    >

43{{ value }}</textarea

44    >

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

Dependencies

Packages

marcorieser/tailwind-merge-statamic

1composer require marcorieser/tailwind-merge-statamic

Internal dependencies