Skip to content
Forms

Input Group

Server Component

A composable wrapper that fuses prefix/suffix addons to an Input into one bordered field.

Import

tsx
import { InputGroup, InputGroupAddon } from "@cronus-ui/ui";
bash
npx cronus-ui add input-group

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard
default.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component InputGroupDefault layout:inline style:input-group {
  aria-label:"Amount"
  label "Amount"
  text "0.00"
  text "$"
}

page "/audit/input-group/default" type:custom {
  use InputGroupDefault
}

API Reference

Generated from the component's exported types.

InputGroupProps

Extends HTMLAttributes<HTMLDivElement>

Skip InputGroupProps props table
PropTypeDefaultDescription
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.

InputGroupAddonProps

Extends HTMLAttributes<HTMLDivElement>

Skip InputGroupAddonProps props table
PropTypeDefaultDescription
align
"start" | "end""start"Which side the addon flanks. Affects the divider edge. Defaults to "start".
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.