Group

The following example show how to add a text-label inside an input field.

Before

<tc:in> <f:facet name="before">https://example.com/</f:facet> </tc:in>

https://example.com/

After

<tc:in label="Price"> <f:facet name="after">.00 €</f:facet> </tc:in>Price

.00 €

Output

The following example show, how to add twice tc:out on one side in an input group

<tc:in id="values"> <f:facet name="before"> <tc:out id="firstName" value="Bob"/> <tc:out id="lastName" value="Marley"/> </f:facet> </tc:in>

BobMarley

Press the 'Send'-Button to add your message to the chat.

<tc:in value="#{groupController.newMessage}"> ... <f:facet name="after"> <tc:button label="Send" action="#{groupController.sendChat}"> <f:ajax execute="inewmessage" render="tachatlog"/> </tc:button> </f:facet> </tc:in>ChatPeter: Hi, how are you?

User TwoSend

The following two examples show an input field with a dropdown element in front of. Pressing the "SendTo"-Button will display a selectable list. This list is different in the examples. Notice that the omit attribute is set for <tc:link/>.

Info It's recommended to use buttons instead of links for dropdown menus inside an input group.
When using a button, a dropdown menu is positioned under the input group. Otherwise the dropdown menu is set directly under the link.

Commands

<tc:in placeholder="type a message"> <f:facet name="before"> <tc:button id="lsendtoc" label="#{groupController.sendTo}" omit="true"> <tc:command label="SendTo: Peter"> <f:ajax render="isendtoc" execute="isendtoc" listener="#{groupController.sendToListener}"/> </tc:command> ... </tc:button> </f:facet> </tc:in>

SendTo: PeterSendTo: BobSendTo: All

Radio Buttons

<tc:in id="isendtorb" placeholder="type a message"> <f:facet name="after"> <tc:button id="lsendtorb" label="#{groupController.sendTo}" omit="true"> <tc:selectOneRadio value="#{groupController.sendTo}"> <tc:selectItem itemValue="SendTo: Peter"/> ... <f:ajax render="isendtorb"/> </tc:selectOneRadio> </tc:button> </f:facet> </tc:in>

Send To:

Peter

Bob

All

Choice

Japanese YenTrinidad & Tobago DollarUS DollarEuro

Value in €1,000.00

Since Tobago 5.3.0 these facets can be used in <tc:date>

Before and After

Date

BeforeAfter