Input Group

Add addons, buttons, and helper content to inputs.

100%

<twig:InputGroup class="max-w-xs">
    <twig:InputGroup:Input placeholder="Search..." />
    <twig:InputGroup:Addon>
        <twig:ux:icon name="lucide:search" />
    </twig:InputGroup:Addon>
    <twig:InputGroup:Addon align="inline-end">12 results</twig:InputGroup:Addon>
</twig:InputGroup>

Installation

Note

Available since UX Toolkit 3.0.

php bin/console ux:install input-group --kit shadcn

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

Copy the following file(s) into your app:

templates/components/InputGroup.html.twig

<div
    data-slot="input-group"
    role="group"
    {{ attributes.defaults({
        class: 'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5'|tailwind_classes,
    }) }}
>
    {##- The input group elements, typically includes input, `InputGroup:Addon`, and/or `InputGroup:Button`. -#}
    {%- block content %}{% endblock -%}
</div>

templates/components/InputGroup/Addon.html.twig

{%- props
    ## 'inline-start'|'inline-end'|'block-start'|'block-end' The addon position relative to the input.
    align = 'inline-start'
-%}
{%- set style = html_cva(
    base: "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
    variants: {
        align: {
            'inline-start': 'order-first ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem]',
            'inline-end': 'order-last pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem]',
            'block-start': 'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
            'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
        },
    },
) -%}
<div
    data-slot="input-group-addon"
    data-align="{{ align }}"
    role="group"
    {{ attributes.defaults({
        class: style.apply({align: align})|tailwind_classes,
    }) }}
>
    {##- The addon content, typically an icon or text. -#}
    {%- block content %}{% endblock -%}
</div>

templates/components/InputGroup/Button.html.twig

{%- props
    ## 'button'|'submit' The button type.
    type = 'button',
    ## 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant.
    variant = 'ghost',
    ## 'default'|'sm'|'lg'|'icon'|'icon-sm'|'icon-lg' The button size.
    size = 'xs'
-%}
{%- set style = html_cva(
    base: 'flex items-center gap-2 text-sm shadow-none',
    variants: {
        size: {
            xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
            sm: '',
            'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
        },
    },
) %}
<twig:Button
    type="{{ type }}"
    variant="{{ variant }}"
    size="{{ size }}"
    {{ ...attributes.defaults({class: style.apply({size: size})|tailwind_classes}) }}
>
    {##- The button label and/or icon. -#}
    {{- block(outerBlocks.content) -}}
</twig:Button>

templates/components/InputGroup/Input.html.twig

<twig:Input
    data-slot="input-group-control"
    {{ ...attributes.defaults({class: 'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent'|tailwind_classes}) }}
/>

templates/components/InputGroup/Text.html.twig

<span
    data-slot="input-group-text"
    {{ attributes.defaults({
        class: 'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4'|tailwind_classes,
    }) }}
>
    {##- The text content displayed in the input group. -#}
    {%- block content %}{% endblock -%}
</span>

templates/components/InputGroup/Textarea.html.twig

<twig:Textarea
    data-slot="input-group-control"
    {{ ...attributes.defaults({class: 'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent'|tailwind_classes}) }}
>
    {##- The initial textarea value. -#}
    {{- block(outerBlocks.content) -}}
</twig:Textarea>

templates/components/Button.html.twig

{%- props
    ## 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant.
    variant = 'default',
    ## 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size.
    size = 'default',
    ## 'button'|'a' The HTML tag to render; use `a` when the button navigates.
    as = 'button'
-%}
{%- set style = html_cva(
    base: "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    variants: {
        variant: {
            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
            ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
            destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
            link: 'text-primary underline-offset-4 hover:underline',
        },
        size: {
            default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',
            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
            lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',
            icon: 'size-8',
            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
            'icon-lg': 'size-9',
        },
    },
) -%}
<{{ as }}
    data-slot="button"
    data-size="{{ size }}"
    data-variant="{{ variant }}"
    {{ attributes.defaults({
        class: style.apply({variant: variant, size: size})|tailwind_classes,
        type: as == 'button' ? 'button' : false,
    }) }}
>
    {##- The button label and/or icon. -#}
    {%- block content %}{% endblock -%}
</{{ as }}>

templates/components/Input.html.twig

<input
    data-slot="input"
    {{ attributes.defaults({
        class: 'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40'|tailwind_classes,
    }) }}
>

templates/components/Textarea.html.twig

<textarea
    data-slot="textarea"
    {{ attributes.defaults({
        class: 'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40'|tailwind_classes,
    }) }}
>
    {##- The initial textarea value. -#}
    {%- block content %}{% endblock -%}
</textarea>

Usage

<twig:InputGroup>
    <twig:InputGroup:Input placeholder="Search..." />
    <twig:InputGroup:Addon>
        <twig:ux:icon name="lucide:search" />
    </twig:InputGroup:Addon>
</twig:InputGroup>

Examples

Icon

100%

<div class="grid w-full max-w-sm gap-6">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Search..." />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:search" />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input type="email" placeholder="Enter your email" />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:mail" />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Card number" />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:credit-card" />
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon align="inline-end">
            <twig:ux:icon name="lucide:check" />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Card number" />
        <twig:InputGroup:Addon align="inline-end">
            <twig:ux:icon name="lucide:star" />
            <twig:ux:icon name="lucide:info" />
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>

Text

100%

<div class="grid w-full max-w-sm gap-6">
    <twig:InputGroup>
        <twig:InputGroup:Addon>
            <twig:InputGroup:Text>$</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
        <twig:InputGroup:Input placeholder="0.00" />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text>USD</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Addon>
            <twig:InputGroup:Text>https://</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
        <twig:InputGroup:Input placeholder="example.com" class="pl-0.5!" />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text>.com</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Enter your username" />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text>@company.com</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Textarea placeholder="Enter your message" />
        <twig:InputGroup:Addon align="block-end">
            <twig:InputGroup:Text class="text-xs text-muted-foreground">120 characters left</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>

Button

100%

<div class="grid w-full max-w-sm gap-6">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="https://x.com/symfony" readonly />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Button aria-label="Copy" title="Copy" size="icon-xs">
                <twig:ux:icon name="lucide:copy" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup class="[--radius:9999px]">
        <twig:InputGroup:Addon>
            <twig:InputGroup:Button variant="secondary" size="icon-xs">
                <twig:ux:icon name="lucide:info" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon class="pl-1.5 text-muted-foreground">
            https://
        </twig:InputGroup:Addon>
        <twig:InputGroup:Input />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Button size="icon-xs">
                <twig:ux:icon name="lucide:star" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Type to search..." />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Button variant="secondary">Search</twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>

Kbd

100%

<twig:InputGroup class="max-w-sm">
    <twig:InputGroup:Input placeholder="Search..." />
    <twig:InputGroup:Addon>
        <twig:ux:icon name="lucide:search" class="text-muted-foreground" />
    </twig:InputGroup:Addon>
    <twig:InputGroup:Addon align="inline-end">
        <twig:Kbd>⌘K</twig:Kbd>
    </twig:InputGroup:Addon>
</twig:InputGroup>

Spinner

100%

<div class="grid w-full max-w-sm gap-4">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Searching..." />
        <twig:InputGroup:Addon align="inline-end">
            <twig:Spinner />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Processing..." />
        <twig:InputGroup:Addon>
            <twig:Spinner />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Saving changes..." />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text>Saving...</twig:InputGroup:Text>
            <twig:Spinner />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Refreshing data..." />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:loader" class="animate-spin" />
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text class="text-muted-foreground">Please wait...</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>

Textarea

100%

<div class="grid w-full max-w-md gap-4">
    <twig:InputGroup>
        <twig:InputGroup:Textarea
            id="textarea-code-32"
            placeholder="console.log('Hello, world!');"
            class="min-h-[200px]"
        />
        <twig:InputGroup:Addon align="block-end" class="border-t">
            <twig:InputGroup:Text>Line 1, Column 1</twig:InputGroup:Text>
            <twig:InputGroup:Button size="sm" class="ml-auto" variant="default">
                Run <twig:ux:icon name="lucide:corner-down-left" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon align="block-start" class="border-b">
            <twig:InputGroup:Text class="font-mono font-medium">
                <twig:ux:icon name="ri:javascript-fill" />
                script.js
            </twig:InputGroup:Text>
            <twig:InputGroup:Button class="ml-auto" size="icon-xs">
                <twig:ux:icon name="lucide:refresh-ccw" />
            </twig:InputGroup:Button>
            <twig:InputGroup:Button variant="ghost" size="icon-xs">
                <twig:ux:icon name="lucide:copy" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

100%

<div class="w-full flex flex-col items-center gap-16">
    <div dir="rtl" class="grid w-full max-w-sm gap-6">
        <twig:InputGroup class="max-w-xs">
            <twig:InputGroup:Input placeholder="بحث..." />
            <twig:InputGroup:Addon>
                <twig:ux:icon name="lucide:search" />
            </twig:InputGroup:Addon>
            <twig:InputGroup:Addon align="inline-end">١٢ نتيجة</twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="جاري البحث..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:Spinner />
            </twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="جاري حفظ التغييرات..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:InputGroup:Text>جاري الحفظ...</twig:InputGroup:Text>
                <twig:Spinner />
            </twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:Field:Group class="max-w-sm">
            <twig:Field>
                <twig:Field:Label for="rtl-ar-textarea">منطقة النص</twig:Field:Label>
                <twig:InputGroup>
                    <twig:InputGroup:Textarea id="rtl-ar-textarea" placeholder="اكتب تعليقًا..." />
                    <twig:InputGroup:Addon align="block-end">
                        <twig:InputGroup:Text>٠/٢٨٠</twig:InputGroup:Text>
                        <twig:InputGroup:Button variant="default" size="sm" class="ms-auto">نشر</twig:InputGroup:Button>
                    </twig:InputGroup:Addon>
                </twig:InputGroup>
                <twig:Field:Description>تذييل موضع أسفل منطقة النص.</twig:Field:Description>
            </twig:Field>
        </twig:Field:Group>
    </div>

    <div dir="rtl" class="grid w-full max-w-sm gap-6">
        <twig:InputGroup class="max-w-xs">
            <twig:InputGroup:Input placeholder="הקלד..." />
            <twig:InputGroup:Addon>
                <twig:ux:icon name="lucide:search" />
            </twig:InputGroup:Addon>
            <twig:InputGroup:Addon align="inline-end">12 תוצאות</twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="טוען..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:Spinner />
            </twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="שומר שינויים..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:InputGroup:Text>שומר...</twig:InputGroup:Text>
                <twig:Spinner />
            </twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:Field:Group class="max-w-sm">
            <twig:Field>
                <twig:Field:Label for="rtl-he-textarea">אזור טקסט</twig:Field:Label>
                <twig:InputGroup>
                    <twig:InputGroup:Textarea id="rtl-he-textarea" placeholder="כתוב תגובה..." />
                    <twig:InputGroup:Addon align="block-end">
                        <twig:InputGroup:Text>0/280</twig:InputGroup:Text>
                        <twig:InputGroup:Button variant="default" size="sm" class="ms-auto">שלח</twig:InputGroup:Button>
                    </twig:InputGroup:Addon>
                </twig:InputGroup>
                <twig:Field:Description>כותרת תחתונה ממוקמת מתחת לאזור הטקסט.</twig:Field:Description>
            </twig:Field>
        </twig:Field:Group>
    </div>
</div>

Accessibility

InputGroup renders role="group", so the control and its addons are announced as one unit. Give it an aria-label when the group needs a name of its own.
An addon is not a label. Keep a real Label bound to the control with for and id, even when the addon already shows a unit or a prefix.
An icon-only InputGroup:Button needs an aria-label, since <twig:ux:icon> renders aria-hidden="true".
Purely decorative text in an InputGroup:Addon, such as a currency symbol already stated in the label, is still announced. Move it out or hide it with aria-hidden="true" when it only repeats what the label says.
Set aria-invalid="true" on the control rather than on the group, so the invalid state lands on the element the user is editing.

API Reference

`<twig:InputGroup>`

Block	Description
`content`	The input group elements, typically includes input, `InputGroup:Addon`, and/or `InputGroup:Button`.

`<twig:InputGroup:Addon>`

Prop	Type	Default
`align`	`'inline-start'\|'inline-end'\|'block-start'\|'block-end'`	`'inline-start'`

Block	Description
`content`	The addon content, typically an icon or text.

`<twig:InputGroup:Button>`

Prop	Type	Default
`type`	`'button'\|'submit'`	`'button'`
`variant`	`'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'`	`'ghost'`
`size`	`'default'\|'sm'\|'lg'\|'icon'\|'icon-sm'\|'icon-lg'`	`'xs'`

Block	Description
`content`	The button label and/or icon.

`<twig:InputGroup:Text>`

Block	Description
`content`	The text content displayed in the input group.

`<twig:InputGroup:Textarea>`

Block	Description
`content`	The initial textarea value.