The group owns the outside border and the focus and invalid ring; the editor inside keeps its native editing, validation and form value. Put exactly one tp-input, tp-text-area or native editor in the default slot, and label it with a Field as usual.
A group label does not replace an editor label. The group has no second value, submit event, or validation controller: configure and observe those APIs on the editor or Form.
Addons
inline-start and inline-end hold text or icons beside the editor. Clicking a non-interactive addon focuses the editor, so units and prefixes behave like part of the field.
prefix follows addonPosition; suffix is always at the inline end. Empty regions occupy no space.
Text addons
Default density
Compact density
Restart from the initial state
Show the copyable source
Buttons in the action slot sit after the editor and stay independently operable, even when the editor is read-only or disabled. action-variant and action-size set their defaults; an explicitly configured Button wins.
action sits after the editor, before the inline-end addon.
Actions
Default density
Compact density
Restart from the initial state
Show the copyable source
An Input group can join a Button group as one member, beside Buttons or a static text segment, so a search field and its submit Button share one seamed edge.
Button group composition
Default density
Compact density
Restart from the initial state
Show the copyable source
Addon slots also take interactive components, such as a Menu that picks a country code or a Tooltip that explains the expected format. They keep their own focus and keyboard behavior; give an icon-only trigger an aria-label.
Interactive addons
Default density
Compact density
Restart from the initial state
Show the copyable source
block-start and block-end span the group above and below the editor. With a Text area they make a composer: a context line on top, a character count and submit actions in the footer.
Put a Button in a block edge for a multiline composer footer; it retains its own Button configuration.
Composer
Default density
Compact density
Restart from the initial state
Show the copyable source
Replying to Jonas Weber0/280CancelPost reply
Replying to Jonas Weber0/280CancelPost reply
<tp-field label="Reply" style="max-inline-size:30rem;margin-inline:auto;inline-size:100%">
<tp-input-group>
<span slot="block-start">Replying to Jonas Weber</span>
<tp-text-area id="input-group-reply" maxlength="280" placeholder="Share an update with the team"></tp-text-area>
<span id="input-group-count" slot="block-end" style="margin-inline-end:auto">0/280</span>
<tp-button slot="block-end" variant="ghost" size="sm">Cancel</tp-button>
<tp-button slot="block-end" size="sm">Post reply</tp-button>
</tp-input-group>
</tp-field>
<script type="module">
const reply = document.querySelector('#input-group-reply');
reply.addEventListener('input', () => {
document.querySelector('#input-group-count').textContent = reply.value.length + '/280';
});
</script>
Native editors
A native textarea or input in the default slot shares the same border and focus ring and keeps all of its own behavior, for example a textarea that grows with its content through field-sizing: content.
Native textarea
Default density
Compact density
Restart from the initial state
Show the copyable source
Markdown supported
Markdown supported
<tp-input-group style="max-inline-size:30rem;margin-inline:auto;inline-size:100%">
<textarea aria-label="Release notes" placeholder="Summarize what changed in this release. The box grows as you type." style="field-sizing:content;min-block-size:calc(var(--tp-control-height-md) * 2);inline-size:100%;font:inherit;padding:var(--tp-space-2);resize:vertical"></textarea>
<span slot="block-end">Markdown supported</span>
</tp-input-group>
States
The group reflects the editor’s disabled and invalid states on its border. Errors still come from the Field.
Disabled and invalid
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionaddon-positionaddonPositionEdge'inline-start'The edge the prefix slot sits at; move it to another edge without changing the markup.action-sizeactionSize'xs' | 'sm' | 'icon-xs' | 'icon-sm''xs'The size the Buttons in the action slot take unless they set their own; the icon-* sizes
suit Icon-only actions.action-variantactionVariant'ghost' | 'default' | 'secondary' | 'destructive' | 'outline' | 'link''ghost'The paint the Buttons in the action slot take unless they set their own.
Slots
SlotDescriptiondefaultThe one editor: an Input, a Text area or a native input or textarea.inline-startText, an Icon or a small control before the editor.inline-endText, an Icon, a Kbd or a small control after the editor.block-startA line above the editor, across the whole group.block-endA line below the editor, across the whole group, such as a count and actions.prefixShort text before the editor, such as a currency sign; placed at addon-position.suffixShort text after the editor, such as a unit.actionButtons right after the editor; they take the group's action size and paint.
CSS parts
PartDescription::part(input-group)The shared border, focus ring and invalid state around the editor and its addons.::part(input-group-action)A Button in the action slot.::part(input-group-addon)The region at one edge that holds text, Icons and controls beside the editor.::part(input-group-control)The editor inside the group, whose own border gives way to the group's.::part(input-group-text)A text segment in an addon, such as a unit or a prefix.
Related
Components, widgets and patterns that use this one.