ArcaneToggleGroup

Use toggle groups for mutually related segmented choices.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: toggle-group

Preview + Code

Code

String alignment = 'left';

ArcaneToggleGroup(
  value: alignment,
  items: [
    ToggleGroupItem.text('left', label: 'Left'),
    ToggleGroupItem.text('center', label: 'Center'),
    ToggleGroupItem.text('right', label: 'Right'),
  ],
  onChanged: (String? value) {
    if (value != null) setAlignment(value);
  },
)

ArcaneToggleGroup#

Use toggle groups for mutually related segmented choices.

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/input/toggle_group.dart

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

ArcaneToggleGroup

Use toggle groups for mutually related segmented choices.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: toggle-group

Preview + Code

Code

String alignment = 'left';

ArcaneToggleGroup(
  value: alignment,
  items: [
    ToggleGroupItem.text('left', label: 'Left'),
    ToggleGroupItem.text('center', label: 'Center'),
    ToggleGroupItem.text('right', label: 'Right'),
  ],
  onChanged: (String? value) {
    if (value != null) setAlignment(value);
  },
)

ArcaneToggleGroup#

Use toggle groups for mutually related segmented choices.

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/input/toggle_group.dart

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

ArcaneToggleGroup

Use toggle groups for mutually related segmented choices.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: toggle-group

Preview + Code

Code

String alignment = 'left';

ArcaneToggleGroup(
  value: alignment,
  items: [
    ToggleGroupItem.text('left', label: 'Left'),
    ToggleGroupItem.text('center', label: 'Center'),
    ToggleGroupItem.text('right', label: 'Right'),
  ],
  onChanged: (String? value) {
    if (value != null) setAlignment(value);
  },
)

ArcaneToggleGroup#

Use toggle groups for mutually related segmented choices.

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/input/toggle_group.dart

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