InputGroup

import { InputGroup, Button } from "@grassroot/ui-react";
 
<InputGroup>
  <InputGroup.Addon>https://</InputGroup.Addon>
  <input placeholder="my-service" />
  <InputGroup.Addon>.trajectory.software</InputGroup.Addon>
</InputGroup>
<InputGroup>
  <input placeholder="Search deployments" />
  <Button variant="primary">Search</Button>
</InputGroup>

<script setup lang="ts">
import { InputGroupAddon, InputGroup, Button } from "@grassroot/ui-vue";
</script>
 
<template>
  <InputGroup
 
  >
    <InputGroupAddon>https://</InputGroupAddon>
    <input placeholder="my-service" />
    <InputGroupAddon>.trajectory.software</InputGroupAddon>
  </InputGroup>
  <InputGroup
 
  >
    <input placeholder="Search deployments" />
    <Button variant="primary">Search</Button>
  </InputGroup>
</template>

import { Component } from "@angular/core";
import { GrassrootInputGroupAddon, GrassrootInputGroup, GrassrootButton } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootInputGroupAddon, GrassrootInputGroup, GrassrootButton],
  template: `
    <grassroot-input-group
 
    >
      <grassroot-input-group-addon>https://</grassroot-input-group-addon>
      <input placeholder="my-service" />
      <grassroot-input-group-addon>.trajectory.software</grassroot-input-group-addon>
    </grassroot-input-group>
    <grassroot-input-group
 
    >
      <input placeholder="Search deployments" />
      <grassroot-button variant="primary">Search</grassroot-button>
    </grassroot-input-group>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { InputGroupAddon, InputGroup, Button } from "@grassroot/ui-svelte";
</script>
 
<InputGroup
 
>
  <InputGroupAddon>https://</InputGroupAddon>
  <input placeholder="my-service" />
  <InputGroupAddon>.trajectory.software</InputGroupAddon>
</InputGroup>
<InputGroup
 
>
  <input placeholder="Search deployments" />
  <Button variant="primary">Search</Button>
</InputGroup>

import { InputGroup, Button } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <InputGroup
 
      >
        <InputGroup.Addon>https://</InputGroup.Addon>
        <input placeholder="my-service" />
        <InputGroup.Addon>.trajectory.software</InputGroup.Addon>
      </InputGroup>
      <InputGroup
 
      >
        <input placeholder="Search deployments" />
        <Button variant="primary">Search</Button>
      </InputGroup>
    </>
  );
}