Home

Input group

An input (or text area) with addons inside its edge: an icon, a fixed text such as https:// or .ca, a unit, or a small button.

ui.input-groupcomponents/ui/input-group.tsx

Use case

For the AI

Use it when something has to sit inside the field: a mail icon before an email, https:// before a website, $ or % around an amount, a show and hide button on a password, a Send button under a message. The whole group wears one edge and one focus, and pressing an addon puts the cursor in the field.

Use it when

  • An icon before the text (email, website, phone)
  • A fixed prefix or suffix (https://, .ca, $, kg)
  • A button inside the field (show the password, copy)
  • A text box with a row of actions under it (align block-end)

Use something else when

Examples

An icon before
https://
.com
Text before and after
A button inside

Code

Import

import { EyeIcon, EyeOffIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/ui/input-group"

Usage

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="ateliernord" aria-label="Website" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>.ca</InputGroupText>
  </InputGroupAddon>
</InputGroup>

<InputGroup>
  <InputGroupInput type={shown ? "text" : "password"} aria-label="Password" />
  <InputGroupAddon align="inline-end">
    <Button size="icon-xs" variant="ghost" aria-label={shown ? "Hide Password" : "Show Password"} onClick={() => setShown((s) => !s)}>
      {shown ? <EyeOffIcon /> : <EyeIcon />}
    </Button>
  </InputGroupAddon>
</InputGroup>

Rules

  • The field inside is InputGroupInput or InputGroupTextarea, never a plain Input: the group draws the one edge.
  • Each addon is an InputGroupAddon; align is inline-start (the default), inline-end, block-start or block-end, and words in it go in InputGroupText.
  • A button in an addon is a ghost icon button (icon-xs or icon-sm) with aria-label.
  • Mark an error with aria-invalid on InputGroupInput.