Input group

An input with icons, text or a button inside its frame, for example a search field. With label, it is wrapped in a Field.

Kumo source

import { MagnifyingGlassIcon } from "@phosphor-icons/react";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@etched/reticle/input-group";

export function Preview() {
  return (
    <InputGroup>
      <InputGroupAddon>
        <MagnifyingGlassIcon />
      </InputGroupAddon>
      <InputGroupInput type="search" aria-label="Search candidates" placeholder="Search candidates" />
    </InputGroup>
  );
}

Installation

import { InputGroup, InputGroupAddon, InputGroupInput } from "@etched/reticle/input-group";

Examples

Search

An icon before the field and a clear button after it. A press on the icon focuses the field.

import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
import { useState } from "react";
import { Button } from "@etched/reticle/button";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@etched/reticle/input-group";

export function Search() {
  const [query, setQuery] = useState("thermal");

  return (
    <div className="grid">
      <InputGroup>
        <InputGroupAddon>
          <MagnifyingGlassIcon />
        </InputGroupAddon>
        <InputGroupInput aria-label="Search runs" placeholder="Search runs" value={query} onChange={(event) => setQuery(event.target.value)} />
        {query && (
          <InputGroupAddon align="end">
            <Button size="sm" variant="ghost" shape="square" aria-label="Clear search" icon={<XIcon />} onClick={() => setQuery("")} />
          </InputGroupAddon>
        )}
      </InputGroup>
    </div>
  );
}

Text and sizes

https://

⌘K

import { MagnifyingGlassIcon } from "@phosphor-icons/react";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@etched/reticle/input-group";

export function TextAndSizes() {
  return (
    <div className="grid">
      <InputGroup>
        <InputGroupAddon>https://</InputGroupAddon>
        <InputGroupInput aria-label="Site" defaultValue="tracer.etched.com" />
      </InputGroup>
      <InputGroup size="sm">
        <InputGroupAddon>
          <MagnifyingGlassIcon />
        </InputGroupAddon>
        <InputGroupInput aria-label="Filter rows" placeholder="Filter rows" />
        <InputGroupAddon align="end">⌘K</InputGroupAddon>
      </InputGroup>
    </div>
  );
}

In a field

label, description and error wrap the group in a Field; the label names the field inside.

Lot

L-

Lots start with L-.

Owner email

@etched.com

Enter an email address.

import { InputGroup, InputGroupAddon, InputGroupInput } from "@etched/reticle/input-group";

export function InAField() {
  return (
    <div className="grid">
      <InputGroup label="Lot" description="Lots start with L-.">
        <InputGroupAddon>L-</InputGroupAddon>
        <InputGroupInput placeholder="7801" />
      </InputGroup>
      <InputGroup label="Owner email" error="Enter an email address.">
        <InputGroupInput type="email" defaultValue="sam@" />
        <InputGroupAddon align="end">@etched.com</InputGroupAddon>
      </InputGroup>
    </div>
  );
}

API reference

InputGroupAddon

Prop	Type	Default	Description
align	"start" \| "end"	"start"	Before or after the field, whatever its place in the code.
children *	ReactNode	–	An icon, short text, or a small ghost `Button` (an icon-only one needs `aria-label`).
className	string	–

InputGroup

Prop	Type	Default	Description
label	ReactNode	–
description	ReactNode	–
error	FieldError	–
size	"sm" \| "base"	"base"
children *	ReactNode	–	An `InputGroupInput`, and `InputGroupAddon`s before or after it.
className	string	–