DisclosureGroup

Solidtype_heroui.Disclosure_group holds the Disclosures inside it, each by its id, and keeps which are expanded: one at a time, expanding another collapsing it, or several, with the class HeroUI’s own disclosureGroupVariants gives. Kobalte has no disclosure group; this one is built on the port’s Disclosure, which is Kobalte’s collapsible.

Usage

HeroUI’s examples, with HeroUI’s icons from @gravity-ui/icons and Iconify.

Preview HeroUI Native

Scan this QR code with your camera app to preview the HeroUI native components.

Expo must be installed on your device.

Preview on Expo Go

---

Download App

disclosure_group_usage.mlx

module S = Solidtype.Solid
module Button = Solidtype_heroui.Button
module Disclosure = Solidtype_heroui.Disclosure
module Disclosure_group = Solidtype_heroui.Disclosure_group
module Separator = Solidtype_heroui.Separator

(* A disclosure whose trigger is secondary while it is expanded, and
   transparent while it is not. *)
let item ~expanded ~id ~icon ~title ~body =
  let open_ () = Array.exists (String.equal id) (S.get expanded) in
  <Disclosure id=(fun () -> id)>
    <Disclosure.Heading>
      <Button
        slot=`trigger
        variant=(fun () -> if open_ () then `secondary else `tertiary)
        class_=(fun () ->
                 if open_ () then "w-full border-none"
                 else "w-full border-none bg-transparent")>
        <div class_="flex w-full items-center justify-start gap-2">
          (fun () -> Solidtype.Jsx.element (icon ()))
          (fun () -> Solidtype.Jsx.string title)
        </div>
        <Disclosure.Indicator class_="text-muted" />
      </Button>
    </Disclosure.Heading>
    <Disclosure.Content>
      <Disclosure.Body
        class_="mx-2 flex flex-col items-center gap-2 p-4 text-center">
        (fun () -> Solidtype.Jsx.element (body ()))
      </Disclosure.Body>
    </Disclosure.Content>
  </Disclosure>

let qr_code =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/qr-code-native.png"

let preview () =
  Solidtype.Jsx.fragment
    [|
      <p class_="text-sm text-muted">
        "Scan this QR code with your camera app to preview the HeroUI native \
         components."
      </p>;
      <img
        alt="Expo Go QR Code"
        class_="aspect-square w-full max-w-54 object-cover"
        src=(fun () -> qr_code)
      />;
      <p class_="text-sm text-muted">
        "Expo must be installed on your device."
      </p>;
      <Button class_="mt-4" variant=`primary>
        <Iconify.Logos_expo_icon class_="[&_path]:fill-accent-foreground" />
        "Preview on Expo Go"
      </Button>;
    |]

let download () =
  Solidtype.Jsx.fragment
    [|
      <p class_="text-sm text-muted">
        "Download the HeroUI native app to explore our mobile components \
         directly on your device."
      </p>;
      <img
        alt="App Store QR Code"
        class_="aspect-square w-full max-w-54 object-cover"
        src=(fun () -> qr_code)
      />;
      <p class_="text-sm text-muted">"Available on iOS and Android devices."</p>;
      <Button class_="mt-4" variant=`primary>
        <Iconify.Tabler_brand_apple_filled /> "Download on App Store"
      </Button>;
    |]

let make () =
  let expanded, set_expanded = S.create_signal [| "preview" |] in
  <div class_="w-full max-w-md">
    <div class_="flex flex-col gap-4 bg-transparent p-4">
      <Disclosure_group
        expanded_keys=(fun () -> S.get expanded)
        on_expanded_change=(S.set set_expanded)>
        (fun () ->
          Solidtype.Jsx.element
          @@ item ~expanded ~id:"preview"
               ~icon:(fun () -> <Gravity.Qr_code />)
               ~title:"Preview HeroUI Native" ~body:preview)
        <Separator class_="my-2" />
        (fun () ->
          Solidtype.Jsx.element
          @@ item ~expanded ~id:"download"
               ~icon:(fun () -> <Iconify.Tabler_brand_apple_filled />)
               ~title:"Download App" ~body:download)
      </Disclosure_group>
    </div>
  </div>

Anatomy

<Disclosure_group>
  <Disclosure id="first">...</Disclosure>
  <Disclosure id="second">...</Disclosure>
</Disclosure_group>

Examples

Controlled

expanded_keys gives the expanded disclosures’ ids, and on_expanded_change is called with them all. Disclosure_group.navigation, HeroUI’s useDisclosureGroupNavigation, gives previous and next buttons over the group’s disclosures. Where several may be expanded, next expands the one after the last expanded and previous the one before the first, so each press reaches another, where HeroUI’s steps from the first expanded alone and reaches the same one twice.

HeroUI Native

Preview HeroUI Native

Scan this QR code with your camera app to preview the HeroUI native components.

Expo must be installed on your device.

Preview on Expo Go

---

Download App

disclosure_group_controlled.mlx

module S = Solidtype.Solid
module Button = Solidtype_heroui.Button
module Disclosure_group = Solidtype_heroui.Disclosure_group
module Separator = Solidtype_heroui.Separator
module Usage = Disclosure_group_usage

let make () =
  let expanded, set_expanded = S.create_signal [| "preview" |] in
  let n =
    Disclosure_group.navigation
      ~expanded_keys:(fun () -> S.get expanded)
      ~item_ids:[| "preview"; "download" |]
      ~on_expanded_change:(S.set set_expanded) ()
  in
  <div class_="w-full max-w-md">
    <div class_="flex flex-col gap-4 rounded-3xl p-4">
      <div class_="mb-2 flex items-center justify-between">
        <h3 class_="text-lg font-semibold">"HeroUI Native"</h3>
        <div class_="flex gap-2">
          <Button
            aria_label="Previous disclosure"
            is_disabled=(fun () -> n.is_prev_disabled ())
            size=`sm
            variant=`secondary
            on_click=(fun _ -> n.on_previous ())>
            <Gravity.Chevron_up class_="size-4" />
          </Button>
          <Button
            aria_label="Next disclosure"
            is_disabled=(fun () -> n.is_next_disabled ())
            size=`sm
            variant=`secondary
            on_click=(fun _ -> n.on_next ())>
            <Gravity.Chevron_down class_="size-4" />
          </Button>
        </div>
      </div>
      <Disclosure_group
        expanded_keys=(fun () -> S.get expanded)
        on_expanded_change=(S.set set_expanded)>
        (fun () ->
          Solidtype.Jsx.element
          @@ Usage.item ~expanded ~id:"preview"
               ~icon:(fun () -> <Gravity.Qr_code />)
               ~title:"Preview HeroUI Native" ~body:Usage.preview)
        <Separator class_="my-2" />
        (fun () ->
          Solidtype.Jsx.element
          @@ Usage.item ~expanded ~id:"download"
               ~icon:(fun () -> <Iconify.Tabler_brand_apple_filled />)
               ~title:"Download App" ~body:Usage.download)
      </Disclosure_group>
    </div>
  </div>

Customization

Tailwind CSS

class_ is added after HeroUI’s class.

Billing

---

Support

disclosure_group_tailwind.mlx

module Button = Solidtype_heroui.Button
module Disclosure = Solidtype_heroui.Disclosure
module Disclosure_group = Solidtype_heroui.Disclosure_group
module Separator = Solidtype_heroui.Separator

let make () =
  <Disclosure_group class_="w-full max-w-sm rounded-xl bg-default-soft p-2">
    <Disclosure id="billing">
      <Disclosure.Heading>
        <Button class_="w-full justify-between" slot=`trigger variant=`ghost>
          "Billing" <Disclosure.Indicator class_="text-muted" />
        </Button>
      </Disclosure.Heading>
      <Disclosure.Content>
        <Disclosure.Body class_="text-sm text-muted">
          "Invoices are issued on the first of each month."
        </Disclosure.Body>
      </Disclosure.Content>
    </Disclosure>
    <Separator class_="my-1" />
    <Disclosure id="support">
      <Disclosure.Heading>
        <Button class_="w-full justify-between" slot=`trigger variant=`ghost>
          "Support" <Disclosure.Indicator class_="text-muted" />
        </Button>
      </Disclosure.Heading>
      <Disclosure.Content>
        <Disclosure.Body class_="text-sm text-muted">
          "Reach us at help@heroui.com. Typical response time is under one \
           business day."
        </Disclosure.Body>
      </Disclosure.Content>
    </Disclosure>
  </Disclosure_group>

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every group, as with HeroUI in React:

@layer components {
  .disclosure-group {
    @apply w-full;
  }
}

Styling Reference

CSS Classes

• .disclosure-group, the group, its layout contained

Interactive States

• Disabled: [data-disabled="true"] on the group, and each disclosure disabled with it
• Expanded: [data-expanded="true"] on each disclosure expanded

API Reference

Each prop beside the name HeroUI’s React component gives it.

DisclosureGroup

React	solidtype	Type	Default	Description
expandedKeys	expanded_keys	string array		The expanded disclosures’ ids, while given
defaultExpandedKeys	default_expanded_keys	string array	[||]	Those expanded at first
onExpandedChange	on_expanded_change	string array -> unit		Called with the expanded ids
allowsMultipleExpanded	allows_multiple_expanded	bool	false	Whether several may be expanded
isDisabled	is_disabled	bool	false	Whether every disclosure inside it is disabled
className	class_	string		Added after HeroUI’s class
children	children	elements		Its disclosures
render props	—			Not yet

navigation

React	solidtype	Type	Description
expandedKeys	expanded_keys	unit -> string array	The expanded ids, read as they change
itemIds	item_ids	string array	The disclosures’ ids, in order
onExpandedChange	on_expanded_change	string array -> unit	Sets the expanded ids
allowsMultipleExpanded	allows_multiple_expanded	bool	Whether a step expands one beside those expanded
currentIndex	current_index	unit -> int	The first expanded’s index
isPrevDisabled, isNextDisabled	is_prev_disabled, is_next_disabled	unit -> bool	Whether a step has nowhere to go
onPrevious, onNext	on_previous, on_next	unit -> unit	Steps

Beside React

Original HeroUI documentation: DisclosureGroup.

The same HeroUI DisclosureGroup twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two groups: a marked row is one they disagree on, and a dimmed row is a framework’s own, which no style reads.

allows multiple expandeddisabled

solidtype — OCaml, on Solid and Kobalte

shipping

About shipping.

returns

React — TypeScript, on React Aria

attribute	solidtype	React