Group

The <tc:in/> tag may be extended with the facet tags <f:facet name="before"> and <f:facet name="after">. With these, you can add text and dropdown menus to an input field.

Tag Library Documentation

Text

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>

Bob

Marley

Commands

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>

Chat

Peter: Hi, how are you?

User Two

Dropdown Menu

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>

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:

Choice

Value in €1,000.00

Date

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

Before and After

Date

Before After