Skip to content
Stylus UI

Input Group

New
Groups one or more interactive elements into a single unified field with a shared focus ring.

Usage

Section titled “Usage”

InputGroup is helpful when you have inputs, buttons, icons, and text which you want to group inside of a visually unified input. It automatically handles removing borders and focus styles from nested elements.

 
import { Button } from "stylus-ui/Button";
import { Input } from "stylus-ui/Input";
import { InputGroup } from "stylus-ui/InputGroup";


export default () => (
  <InputGroup label="Comment">
    <Input name="search" placeholder="Leave a comment" />
    <Button variant="primary">Post</Button>
  </InputGroup>
);

Hiding labels

Section titled “Hiding labels”

You must pass a label for accessibility. If you need to visually hide it, set labelHidden to true.

 
import { Button } from "stylus-ui/Button";
import { Input } from "stylus-ui/Input";
import { InputGroup } from "stylus-ui/InputGroup";


export default () => (
  <InputGroup label="Comment" labelHidden>
    <Input name="search" placeholder="Leave a comment" />
    <Button variant="primary">Post</Button>
  </InputGroup>
);

With icon

Section titled “With icon”
 
import { faMagnifyingGlass } from "@fortawesome/pro-regular-svg-icons";
import { Icon } from "stylus-ui/Icon";
import { Input } from "stylus-ui/Input";
import { InputGroup } from "stylus-ui/InputGroup";


export default () => (
  <InputGroup label="Search" labelHidden className="max-w-xs">
    <Icon icon={faMagnifyingGlass} />
    <Input name="search" placeholder="Search…" />
  </InputGroup>
);

With dropdown

Section titled “With dropdown”
 
import { useState } from "react";
import { faMagnifyingGlass } from "@fortawesome/pro-regular-svg-icons";
import { Button } from "stylus-ui/Button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "stylus-ui/DropdownMenu";
import { Icon } from "stylus-ui/Icon";
import { Input } from "stylus-ui/Input";
import { InputGroup } from "stylus-ui/InputGroup";


const FILTERS = ["All", "Scribes", "Pages"];


export default () => {
  const [filter, setFilter] = useState("All");


  return (
    <InputGroup label="Search" labelHidden className="max-w-sm">
      <Icon icon={faMagnifyingGlass} />
      <Input name="search" placeholder="Search…" />
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="small" dropdown>
            {filter}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuRadioGroup value={filter} onValueChange={setFilter}>
            {FILTERS.map((f) => (
              <DropdownMenuRadioItem key={f} value={f}>
                {f}
              </DropdownMenuRadioItem>
            ))}
          </DropdownMenuRadioGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </InputGroup>
  );
};

API Reference

Section titled “API Reference”

InputGroup

Section titled “InputGroup”

A container that groups one or more interactive elements into a single unified field. Clicking any non-interactive area of the group focuses the first input or textarea.

Setting disabled on the group natively disables all descendant form controls (inputs, textareas, buttons, selects) via the HTML <fieldset> element.

label

Required
string

Label which displays above the input group. Required for accessibility.

children

ReactNode

Contents of the input group.

className

string

Additional classes to apply to the input group.

labelHidden

boolean = false

Visually hide the label.