- Componentes
- Accordion
- ActivityGraph
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- AvatarGroup
- Badge
- Box
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Connector
- Container
- Context Menu
- Dialog
- Drawer
- DropdownMenu
- Empty
- EnvEditor
- Fade In
- Field
- Fps
- Hover Card
- Highlighter
- Input
- InputGroup
- Input OTP
- Item
- JSONViewer
- Kbd
- Label
- Marquee
- Menubar
- Native Select
- Navigation Menu
- NumberInput
- Pagination
- Popover
- Preview Card
- Progress
- ProgressiveBlur
- Radio Group
- Resizable
- Retro Grid
- Scan Line
- ScrollArea
- Scrubber
- SectionLabel
- Select
- Separator
- Sheet
- Signature
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Stagger Group
- StatusDot
- SystemBanner
- Switch
- Table
- Tabs
- TagInput
- Textarea
- ThemeToogle
- Toggle
- Toggle Group
- Tooltip
- Typing Effect
Os componentes exportados são: InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput e InputGroupTextarea. O caminho em @zexon/ui/components/input-group. O grupo aplica role="group" e estilos de foco quando um controle interno está focado.
Uso
Addon com texto
Variante HUD
InputGroup variant="hud" envolve o grupo com a mesma moldura e colchetes de canto que o campo tático (Input em HUD), sem duplicar borda no interior.
Addon com HUD
Alinhamento dos addons
InputGroupAddon aceita align: inline-start, inline-end, block-start, block-end (controlado por variantes CVA).
Sufixo à direita
Botão no grupo
InputGroupButton usa Button internamente com tamanhos xs por defeito.
Pesquisar
Textarea no grupo
InputGroupTextarea
Estados e acessibilidade
Coloque aria-invalid no controle (InputGroupInput / InputGroupTextarea): o grupo herda o estilo de erro via has-[[data-slot][aria-invalid=true]].
Aplicações
Combine addons com ícones ou texto para moeda, unidades e domínios, mantendo um único foco visível em todo o grupo.