Files
temetro/.agents/skills/coss/references/primitives/input-group.md
T
Khalid Abdi 929bec8f31 feat: AI-added records save with placeholders + "Added by AI" provenance
Stop blocking AI imports/proposals on missing non-critical fields. Records
the chat agent drafts now save with safe placeholders, auto-generated file
numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a
clinician can review/edit them later.

Backend:
- add `source` (manual|ai) column to patients/appointments/prescriptions
  (migration 0014) + canonical types, services, validation schemas
- relax patient/appointment validation: empty file number allowed, demographic
  + type/provider/initials fall back to placeholders (initials derived from name)
- patients.generateFileNumber() auto-assigns an MRN when one is missing
- proposeAppointment accepts a name when no file number resolves; AI commits +
  /api/ai/import stamp source="ai"

Frontend:
- `source` on Appointment/Patient/Prescription types; AI commits send source="ai"
- reusable <AiBadge> shown on the Patients table/detail and prescriptions list

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-14 19:27:17 +03:00

2.7 KiB

coss Input Group

When to use

  • Inputs/textareas that need inline or block addons.
  • Input composition with icons, buttons, labels, badges, and shortcuts.

Install

npx shadcn@latest add @coss/input-group

Manual deps:

npm install @base-ui/react

Canonical imports

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"

Minimal pattern

<InputGroup>
  <InputGroupInput type="email" placeholder="Email" />
  <InputGroupAddon>
    <MailIcon />
  </InputGroupAddon>
</InputGroup>

Critical invariant

InputGroupAddon must be after InputGroupInput/InputGroupTextarea in DOM order for proper focus behavior.

Patterns from coss particles

Key patterns

Search input with icon:

<InputGroup>
  <InputGroupInput aria-label="Search" placeholder="Search..." type="search" />
  <InputGroupAddon>
    <SearchIcon aria-hidden="true" />
  </InputGroupAddon>
</InputGroup>

URL prefix with text addon:

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="example.com" />
</InputGroup>

Input with interactive button addon:

<InputGroup>
  <InputGroupInput placeholder="Enter value..." />
  <InputGroupAddon>
    <Button size="icon" variant="ghost" aria-label="Clear">
      <XIcon aria-hidden="true" />
    </Button>
  </InputGroupAddon>
</InputGroup>

InputGroupAddon must be after InputGroupInput/InputGroupTextarea in DOM order for proper focus behavior.

More examples

See p-input-group-1 through p-input-group-29 for icons, text prefixes, interactive addons, textarea layouts, and stateful patterns.

Common pitfalls

  • Using Input/Textarea directly instead of InputGroupInput/InputGroupTextarea.
  • Wrong addon DOM order.
  • Missing explicit input types.

Useful particle references

  • icon addon + search baseline: p-input-group-1, p-input-group-2, p-input-group-13, p-input-group-14, p-input-group-20
  • prefix/suffix text addons (url/domain/currency): p-input-group-3, p-input-group-4, p-input-group-5, p-input-group-6
  • interactive addons (buttons/badge/kbd/menu/clear/voice): p-input-group-7, p-input-group-8, p-input-group-9, p-input-group-10, p-input-group-11, p-input-group-12, p-input-group-18, p-input-group-21, p-input-group-22, p-input-group-23
  • textarea/editor-style layouts with block-end/start addons: p-input-group-17, p-input-group-19, p-input-group-27, p-input-group-28, p-input-group-29
  • stateful/validation patterns (disabled/loading/password strength): p-input-group-15, p-input-group-16, p-input-group-24, p-input-group-26