Skip to content

Input group - Web Component

The InputGroup component can be used imported from:

Playground

Parameters

The Web component uses the <z-input-group> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescriptionSlotA11y
configstring
legendstring

Events

This component has events. Check the documentation about how to use the events.

NamePayloadDescription

Slots

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanContent of the input group.
legendspanLegend of the fieldset

Parameters use

config

We can use config in z-input-group to apply if to sub components that are inputs instead of applying the config one by one:

legend

The legend attribute is used to set the legend of the group.

Also you can use the legend slot to set the legend of the group.

Legend

Important!

The legend slot must always be the first element

Outputs

We can add <output> tags as suffixes, prefixes or middle placeholder, with texts or icons:

@Text

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example