How to group Textfield and Button?

Flow
1

I rememberd that it was possible to group textfields and buttons : Valo Theme Test

image

How can i achiv this in vaadin 24.latest ?

2

Hi!

Look this components https://v-herd.eu/jonte-vaadinplus/input-groups

3

You can use TextField#setPrefixComponent and TextField#setSuffixComponent
Screenshot 2026-02-19 at 17.49.04

4

Thats really nice. Is there any way to keep the blue color of the icon?
image
Grey in grey it does not get enough attention to the eye.

5

You can use Icon#setColor
Screenshot 2026-02-19 at 18.24.35

6

Note that from an accessibility point of view, you shouldn’t nest interactable elements: Accessibility Insights - nested-interactive

1 Like
7

True but what happend to the Group Funktion for Textfield and Buttons.

8

Just place them next to each-other and remove the spacing between them, e.g. with a horizontal layout or flex layout. no magic needed

9

Simply does not look good this way, cause the corners where the components “meet” are rounded:
image

10 

vaadin-text-field {
   --vaadin-input-field-bottom-end-radius: 0;
   --vaadin-input-field-top-end-radius: 0;
}

vaadin-button {
   --vaadin-button-border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
}
2 Likes
11

Thanks a lot =). The Textfield css was what i did not found. For the button also this works like expected.

button.getStyle().set("border-top-left-radius", "0");
button.getStyle().set("border-bottom-left-radius", "0");
12

What is the correct way of doing it?
Is setAriaLabel() sufficient?
Nested elements are a regular in Google UX

Google nested elements
Google nested elements1846Ă—900 34.8 KB

13

Those are not nested. It’s just visual

14

Ah of course. CSS.
Duh!