View as Markdown
Input Group
Add addons, buttons, and helper content to inputs.
Loading...
<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
php bin/console ux:install input-group --kit shadcn
Install the following Composer dependencies:
composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0
Copy the following file(s) into your app:
{# @block content The input group elements, typically includes input, `InputGroup:Addon`, and/or `InputGroup:Button`. #}
<div
data-slot="input-group"
role="group"
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 ltr:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 rtl:has-[>[data-align=inline-end]]:[&>input]:pe-1.5 ltr:has-[>[data-align=inline-start]]:[&>input]:pl-1.5 rtl:has-[>[data-align=inline-start]]:[&>input]:ps-1.5 ' ~ attributes.render('class'))|tailwind_merge }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</div>
{# @prop align 'inline-start'|'inline-end'|'block-start'|'block-end' The addon position relative to the input. #}
{# @block content The addon content, typically an icon or text. #}
{%- props 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 ltr:pl-2 rtl:ps-2 ltr:has-[>button]:ml-[-0.3rem] rtl:has-[>button]:ms-[-0.3rem] ltr:has-[>kbd]:ml-[-0.15rem] rtl:has-[>kbd]:ms-[-0.15rem]',
'inline-end': 'order-last ltr:pr-2 rtl:pe-2 ltr:has-[>button]:mr-[-0.3rem] rtl:has-[>button]:me-[-0.3rem] ltr:has-[>kbd]:mr-[-0.15rem] rtl: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"
class="{{ style.apply({align: align}, attributes.render('class'))|tailwind_merge }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</div>
{# @prop type 'button'|'submit' The button type. #}
{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant. #}
{# @prop size 'default'|'sm'|'lg'|'icon'|'icon-sm'|'icon-lg' The button size. #}
{# @block content The button label and/or icon. #}
{%- props type = 'button', variant = 'ghost', 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 }}"
class="{{ style.apply({size: size}, attributes.render('class'))|tailwind_merge }}"
{{ ...attributes }}
>
{{- block(outerBlocks.content) -}}
</twig:Button>
<twig:Input
data-slot="input-group-control"
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 ' ~ attributes.render('class'))|tailwind_merge }}"
{{ ...attributes.without('class') }}
/>
{# @block content The text content displayed in the input group. #}
<span
data-slot="input-group-text"
class="{{ ('text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 ' ~ attributes.render('class'))|tailwind_merge }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</span>
{# @block content The initial textarea value. #}
<twig:Textarea
data-slot="input-group-control"
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 ' ~ attributes.render('class'))|tailwind_merge }}"
{{ ...attributes.without('class') }}
>{{- block(outerBlocks.content) -}}</twig:Textarea>
{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant. #}
{# @prop size 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size. #}
{# @prop as 'button' The HTML tag to render. #}
{# @block content The button label and/or icon. #}
{%- props variant = 'default', size = 'default', 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 ltr:has-data-[icon=inline-end]:pr-2 rtl:has-data-[icon=inline-end]:pe-2 ltr:has-data-[icon=inline-start]:pl-2 rtl: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 ltr:has-data-[icon=inline-end]:pr-1.5 rtl:has-data-[icon=inline-end]:pe-1.5 ltr:has-data-[icon=inline-start]:pl-1.5 rtl: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 ltr:has-data-[icon=inline-end]:pr-1.5 rtl:has-data-[icon=inline-end]:pe-1.5 ltr:has-data-[icon=inline-start]:pl-1.5 rtl:has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: 'h-9 gap-1.5 px-2.5 ltr:has-data-[icon=inline-end]:pr-2 rtl:has-data-[icon=inline-end]:pe-2 ltr:has-data-[icon=inline-start]:pl-2 rtl: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-variant="{{ variant }}"
data-size="{{ size }}"
class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</{{ as }}>
<input
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 ' ~ attributes.render('class'))|tailwind_merge }}"
{{ attributes.defaults({'data-slot': 'input'}) }}
>
{# @block content The initial textarea value. #}
<textarea
data-slot="textarea"
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 ' ~ attributes.render('class'))|tailwind_merge }}"
{{ attributes }}
>
{%- 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
Loading...
<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
Loading...
<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
Loading...
<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
Loading...
<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
Loading...
<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
Loading...
<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.
Loading...
<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>
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 The addon position relative to the input.
|
'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 The button type.
|
'button'|'submit' |
'button' |
variant The visual style variant.
|
'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' |
'ghost' |
size The button 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. |