D
Design System

Input Group

Input field group with proximity hover and validation.

When To Use

  • Use Input Group when the user needs to enter or choose information as part of a larger form or workflow.
  • Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
  • Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

  • Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
  • Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

  • Keep a visible label or an equivalent accessible name attached to the control.
  • Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
  • Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Props

children, placeholder, value, onChange, leadingAddon, trailingAddon

Key exports

InputGroup, InputField

Example Code

import { InputField, InputGroup } from "@hilum/ui";
import { Search } from "lucide-react";
import { useState } from "react";

const [value, setValue] = useState("");

<InputGroup>
  <InputField
    index={0}
    label="Search"
    placeholder="Search teamspaces..."
    icon={Search}
    value={value}
    onChange={setValue}
  />
</InputGroup>

Basic

Multiple Fields

Error State