InputGroup

import { InputGroup, Button } from "@grassroot/ui-react";
 
export default function InputGroupDemo() {
  return (
    <div className="flex flex-col gap-3.5">
      <InputGroup>
        <InputGroup.Addon>https://</InputGroup.Addon>
        <input
          className="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
          placeholder="my-service"
        />
        <InputGroup.Addon>.grassroot.sh</InputGroup.Addon>
      </InputGroup>
      <InputGroup>
        <input
          className="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
          placeholder="Search deployments"
        />
        <Button variant="primary">Search</Button>
      </InputGroup>
    </div>
  );
}

<script setup lang="ts">
import { InputGroupAddon, InputGroup, Button } from "@grassroot/ui-vue";
</script>
 
<template>
  <div class="flex flex-col gap-3.5">
    <InputGroup>
      <InputGroupAddon>https://</InputGroupAddon>
      <input
        class="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
        placeholder="my-service"
      />
      <InputGroupAddon>.grassroot.sh</InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <input
        class="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
        placeholder="Search deployments"
      />
      <Button variant="primary">Search</Button>
    </InputGroup>
  </div>
</template>

import { Component } from "@angular/core";
import {
  GrassrootInputGroupAddon,
  GrassrootInputGroup,
  GrassrootButton,
} from "@grassroot/ui-angular";
 
@Component({
  selector: "app-input-group-demo",
  standalone: true,
  imports: [GrassrootInputGroupAddon, GrassrootInputGroup, GrassrootButton],
  host: { style: "display: contents" },
  template: `
    <div class="flex flex-col gap-3.5">
      <grassroot-input-group>
        <grassroot-input-group-addon>https://</grassroot-input-group-addon>
        <input
          class="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
          placeholder="my-service"
        />
        <grassroot-input-group-addon>.grassroot.sh</grassroot-input-group-addon>
      </grassroot-input-group>
      <grassroot-input-group>
        <input
          class="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
          placeholder="Search deployments"
        />
        <grassroot-button variant="primary">Search</grassroot-button>
      </grassroot-input-group>
    </div>
  `,
})
export class InputGroupDemoComponent {}
 
export default InputGroupDemoComponent;

<script lang="ts">
  import { InputGroupAddon, InputGroup, Button } from "@grassroot/ui-svelte";
</script>
 
<div class="flex flex-col gap-3.5">
  <InputGroup>
    <InputGroupAddon>https://</InputGroupAddon>
    <input
      class="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
      placeholder="my-service"
    />
    <InputGroupAddon>.grassroot.sh</InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <input
      class="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
      placeholder="Search deployments"
    />
    <Button variant="primary">Search</Button>
  </InputGroup>
</div>

/** @jsxImportSource solid-js */
import { InputGroup, InputGroupAddon, Button } from "@grassroot/ui-solid";
 
export default function InputGroupDemo() {
  return (
    <div class="flex flex-col gap-3.5">
      <InputGroup>
        <InputGroupAddon>https://</InputGroupAddon>
        <input
          class="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
          placeholder="my-service"
        />
        <InputGroupAddon>.grassroot.sh</InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <input
          class="min-w-0 flex-1 px-3 py-2.5 text-[15px] text-body placeholder:text-muted"
          placeholder="Search deployments"
        />
        <Button variant="primary">Search</Button>
      </InputGroup>
    </div>
  );
}