import { useState } from "react";
import { WyrdAccordion } from "@wyrd-company/react/accordion";
export function ControlledAccordionExample() {
const [expandedValues, setExpandedValues] = useState<readonly string[]>(["targets"]);
return (
<WyrdAccordion
items={[
{ label: "Which targets can I generate?", value: "targets" },
{ label: "Can each product use its own brand?", value: "brands" },
]}
expandedValues={expandedValues}
onExpandedChange={(event) => setExpandedValues(event.expandedValues)}
>
<p>React and Flutter.</p>
<p>Yes. Products supply brand inputs without forking the catalog.</p>
</WyrdAccordion>
);
}
import 'package:wyrd_flutter/wyrd_flutter.dart';
import 'package:flutter/widgets.dart';
class ControlledAccordionExample extends StatefulWidget {
const ControlledAccordionExample({super.key});
@override
State<ControlledAccordionExample> createState() =>
_ControlledAccordionExampleState();
}
class _ControlledAccordionExampleState
extends State<ControlledAccordionExample> {
List<String> expandedValues = const ['targets'];
@override
Widget build(BuildContext context) => WyrdAccordion(
items: const [
{'label': 'Which targets can I generate?', 'value': 'targets'},
{'label': 'Can each product use its own brand?', 'value': 'brands'},
],
expandedValues: expandedValues,
onExpandedChange: (event) =>
setState(() => expandedValues = event.expandedValues),
child: const [
Text('React and Flutter.'),
Text('Yes. Products supply brand inputs.'),
],
);
}