Provide CSS based implementation of toggle button

user-interface/frontend/themes/datamanager/components/custom.css

@@ -15,6 +15,7 @@
 @import "page-area.css";
 @import "span.css";
 @import "spreadsheet.css";
+@import "toggle-button.css";
 @import "vaadin-custom.css";
 @import "virtuallist.css";
 

user-interface/frontend/themes/datamanager/components/toggle-button.css

@@ -0,0 +1,27 @@
+/*Adapted from example provided in
+https://vaadin.com/forum/t/togglebutton-for-flow-3-0-0-vaadin-24-3-10-problem-with-applying-custom-css/166148/17*/
+
+/*Define checkbox width and height*/
+.toggle-button::part(checkbox) {
+  width: var(--lumo-size-m);
+  border-radius: 1em;
+}
+
+/*Button size and style within checkbox*/
+.toggle-button::part(checkbox)::after {
+  content: "";
+  height: calc(var(--lumo-size-m) / 3);
+  background-color: var(--lumo-secondary-text-color);
+  border-radius: 1em;
+  inset: 0;
+  margin: calc(var(--lumo-size-m) / 12);
+  opacity: 1;
+  transition: transform 0.3s;
+  width: calc(var(--lumo-size-m) / 3);
+}
+
+/*After the checkbox is pressed, move the button to the right and change color*/
+.toggle-button[checked]::part(checkbox)::after {
+  background-color: var(--lumo-primary-contrast-color);
+  transform: translateX(calc(var(--lumo-size-m) / 2));
+}

user-interface/src/main/java/life/qbic/datamanager/views/general/ToggleButton.java

@@ -0,0 +1,15 @@
+package life.qbic.datamanager.views.general;
+
+import com.vaadin.flow.component.checkbox.Checkbox;
+
+/**
+ * Custom Toggle Button adapted via css from the default {@link Checkbox} component
+ */
+public class ToggleButton extends Checkbox {
+
+  public ToggleButton(String text) {
+    addClassName("toggle-button");
+    this.setLabel(text);
+  }
+
+}

user-interface/src/main/java/life/qbic/datamanager/views/projects/project/ontology/OntologyLookupComponent.java

@@ -1,7 +1,6 @@
 package life.qbic.datamanager.views.projects.project.ontology;
 
 import com.vaadin.flow.component.UI;
-import com.vaadin.flow.component.checkbox.Checkbox;
 import com.vaadin.flow.component.grid.Grid;
 import com.vaadin.flow.component.grid.Grid.SelectionMode;
 import com.vaadin.flow.component.grid.GridVariant;
@@ -18,14 +17,14 @@
 import com.vaadin.flow.spring.annotation.SpringComponent;
 import com.vaadin.flow.spring.annotation.UIScope;
 import java.io.Serial;
-import java.util.Arrays;
 import java.util.List;
 import java.util.Objects;
 import life.qbic.application.commons.SortOrder;
 import life.qbic.datamanager.views.general.Card;
 import life.qbic.datamanager.views.general.CopyToClipBoardComponent;
 import life.qbic.datamanager.views.general.PageArea;
 import life.qbic.datamanager.views.general.Tag;
+import life.qbic.datamanager.views.general.ToggleButton;
 import life.qbic.projectmanagement.application.ontology.OntologyClass;
 import life.qbic.projectmanagement.application.ontology.SpeciesLookupService;
 import life.qbic.projectmanagement.application.ontology.TerminologyService;
@@ -57,7 +56,7 @@ public class OntologyLookupComponent extends PageArea {
   private GridLazyDataView<OntologyTerm> ontologyGridLazyDataView;
   private String searchTerm = "";
   private boolean speciesSearchActive = false;
-  private Checkbox speciesSearchCheckbox = new Checkbox("I want to search for species");
+  private ToggleButton speciesSearchCheckbox = new ToggleButton("I want to search for species");
   private Grid<OntologyTerm> searchGrid;
 
   public OntologyLookupComponent(