ArcaneInputGroup

Use input groups when an input and action button need to read as one related control.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: input-group

Preview + Code

Code

String search = '';

ArcaneInputGroup(
  children: [
    TextInput(
      placeholder: 'Search',
      value: search,
      onChange: setSearch,
    ),
    Button.primary(label: 'Go', onPressed: () {}),
  ],
)

ArcaneInputGroup#

Use input groups when an input and action button need to read as one related control.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/form/field_wrapper.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneInputGroup

Use input groups when an input and action button need to read as one related control.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: input-group

Preview + Code

Code

String search = '';

ArcaneInputGroup(
  children: [
    TextInput(
      placeholder: 'Search',
      value: search,
      onChange: setSearch,
    ),
    Button.primary(label: 'Go', onPressed: () {}),
  ],
)

ArcaneInputGroup#

Use input groups when an input and action button need to read as one related control.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/form/field_wrapper.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneInputGroup

Use input groups when an input and action button need to read as one related control.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: input-group

Preview + Code

Code

String search = '';

ArcaneInputGroup(
  children: [
    TextInput(
      placeholder: 'Search',
      value: search,
      onChange: setSearch,
    ),
    Button.primary(label: 'Go', onPressed: () {}),
  ],
)

ArcaneInputGroup#

Use input groups when an input and action button need to read as one related control.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/form/field_wrapper.dart

See the Component Catalog for the full exported surface and source mapping.