Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@hua-labs/hua";

(single)

1

type"single" | "multiple""single"Whether one or multiple items can be expanded at once
defaultValuestring | string[]-Initial expanded item(s) for uncontrolled mode
valuestring | string[]-Controlled expanded item(s)
onValueChange(value: string | string[]) => void-Callback when expanded items change
collapsiblebooleanfalseAllow all items to be collapsed (single mode)

docs:common.basicUsagetsx
// Via framework (recommended)
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hua-labs/hua';
// Or direct import
// import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hua-labs/ui/interactive';

<Accordion type="single">
  <AccordionItem value="item1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content for section 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content for section 2</AccordionContent>
  </AccordionItem>
</Accordion>
Multiple Modetsx
<Accordion type="multiple" defaultValue={["item1", "item2"]}>
  <AccordionItem value="item1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
</Accordion>
BottomSheetTabs