Accordion · Tinyrack Design System

Stack disclosure items that expand one section or several at a time.

Contract

Axis	Contract
Selection	Controlled `value` or uncontrolled `defaultValue`
Expansion	Single by default; set `multiple` for independent open items
Availability	Disable individual `TRAccordionItem` entries
Lifecycle	Closed content is removed from the widget tree

When value is provided, update it from onValueChange so the rendered panels follow each interaction. Tab follows the normal focus order, Enter activates immediately, and Space activates on key release. Disabled items ignore pointer and keyboard activation.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Loading the Flutter preview

Usage

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRAccordion(
  items: const [
    TRAccordionItem(
      value: 'install',
      trigger: Text('Install'),
      content: Text('Run the installer.'),
    ),
  ],
)

Examples

Controlled multiple expansion permalink

Update value from onValueChange so either section can open or close and the current selection stays visible.

Loading the Flutter preview

Single, multiple, and disabled states permalink

Use the default single mode for mutually exclusive sections, multiple for independent sections, and disabled on an unavailable item.

Loading the Flutter preview

API

TRAccordion properties

Prop	Type / default	Purpose
`items`	`List<TRAccordionItem> · required`	Defines the ordered disclosure items.
`value`	`List<String>? · null`	Controls the open item values.
`defaultValue`	`List<String> · const []`	Sets the initially open values in uncontrolled mode.
`multiple`	`bool · false`	Allows several items to remain open.
`onValueChange`	`ValueChanged<List<String>>? · null`	Reports the next open values after activation.

TRAccordionItem properties

Prop	Type / default	Purpose
`value`	`String · required`	Identifies the item in the root value list.
`trigger`	`Widget · required`	Renders the interactive item label.
`content`	`Widget · required`	Renders the panel while the item is open.
`disabled`	`bool · false`	Prevents pointer and keyboard activation.