Components

Input group

Place a prefix, suffix or related action beside an input without crowding it.

import { … } from "@fungi.computer/caps/components/input-group";

Hero

import {
  InputGroup,
  InputGroupAddon,
} from "@fungi.computer/caps/components/input-group";
import { Input } from "@fungi.computer/caps/components/input";

export default function Hero() {
  return (
    <InputGroup className="w-full max-w-sm">
      <InputGroupAddon>https://</InputGroupAddon>
      <Input defaultValue="shiit.app" />
    </InputGroup>
  );
}

With action

import { InputGroup } from "@fungi.computer/caps/components/input-group";
import { Input } from "@fungi.computer/caps/components/input";
import { Button } from "@fungi.computer/caps/components/button";

export default function WithAction() {
  return (
    <InputGroup className="w-full max-w-sm">
      <Input placeholder="Invite code" />
      <Button variant="secondary">Apply</Button>
    </InputGroup>
  );
}