Disclosure

Solidtype_heroui.Disclosure is Kobalte’s collapsible with the classes HeroUI’s own disclosureVariants gives: a heading holding the button that expands and collapses it, and the content that follows. A Button given slot=`trigger inside its heading is that button, in HeroUI’s look, as HeroUI’s examples write it.

Its content stays on the page while collapsed, hidden until the browser’s find in page reaches a word in it, which expands it; it grows and shrinks by --disclosure-panel-height, the height HeroUI’s styles animate.

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.

Download on App Store

disclosure_usage.mlx

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

let make () =
  let expanded, set_expanded = S.create_signal true in
  <div class_="w-full max-w-md text-center">
    <Disclosure
      is_expanded=(fun () -> S.get expanded)
      on_expanded_change=(S.set set_expanded)>
      <Disclosure.Heading>
        <Button slot=`trigger variant=`secondary>
          <Gravity.Qr_code /> "Preview HeroUI Native" <Disclosure.Indicator />
        </Button>
      </Disclosure.Heading>
      <Disclosure.Content>
        <Disclosure.Body
          class_="shadow-panel flex flex-col items-center rounded-3xl \
                  bg-surface p-4 text-center">
          <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="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/qr-code-native.png"
          />
          <p class_="text-sm text-muted">
            "Expo must be installed on your device."
          </p>
          <Button class_="mt-4" variant=`primary>
            <Iconify.Tabler_brand_apple_filled /> "Download on App Store"
          </Button>
        </Disclosure.Body>
      </Disclosure.Content>
    </Disclosure>
  </div>

Anatomy

<Disclosure>
  <Disclosure.Heading>
    <Disclosure.Trigger><Disclosure.Indicator /></Disclosure.Trigger>
  </Disclosure.Heading>
  <Disclosure.Content />
</Disclosure>

Examples

Render Function

HeroUI’s Render Function example gives a part render, React’s way to swap the element it renders, which a Solid component has no need of: the port does not take it, nor a function of a part’s state as its children, since the content reads the signal the page keeps, as the usage does.

Customization

Tailwind CSS

class_ is added after HeroUI’s classes; on Disclosure.Body it is the inner element’s, as in React.

Shipping details

disclosure_tailwind.mlx

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

let make () =
  let expanded, set_expanded = S.create_signal false in
  <div class_="w-full max-w-sm">
    <Disclosure
      is_expanded=(fun () -> S.get expanded)
      on_expanded_change=(S.set set_expanded)>
      <Disclosure.Heading>
        <Button
          class_="w-full justify-between rounded-xl border border-border/70 \
                  bg-linear-to-b from-neutral-50/90 to-white px-4 py-3 \
                  font-medium text-foreground shadow-sm ring-1 ring-black/5 \
                  hover:bg-muted/30 dark:from-neutral-900/80 \
                  dark:to-neutral-900 dark:ring-white/10"
          slot=`trigger
          variant=`ghost>
          <span class_="flex items-center gap-2">
            <Gravity.Shopping_bag class_="size-4 text-muted" />
            "Shipping details"
          </span>
          <Disclosure.Indicator class_="text-muted" />
        </Button>
      </Disclosure.Heading>
      <Disclosure.Content>
        <Disclosure.Body
          class_="mt-2 rounded-xl border border-border/70 bg-surface/50 p-4 \
                  text-sm leading-relaxed text-muted dark:bg-neutral-900/50">
          {js|Orders ship within 2 business days. Standard delivery takes 3–5 days; express is available at checkout.|js}
        </Disclosure.Body>
      </Disclosure.Content>
    </Disclosure>
  </div>

Global CSS

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

@layer components {
  .disclosure {
    @apply relative;
  }

  .disclosure__trigger {
    @apply cursor-pointer;
  }

  .disclosure__indicator {
    @apply transition-transform duration-300;
  }

  .disclosure__content {
    @apply overflow-hidden transition-all;
  }
}

Styling Reference

CSS Classes

• .disclosure, the root
• .disclosure__heading, the heading
• .disclosure__trigger, its own trigger
• .disclosure__indicator, the chevron
• .disclosure__content, the content, and .disclosure__body and .disclosure__body-inner inside it

Interactive States

• Expanded: [data-expanded="true"] on the root, the indicator and the content
• Focus: :focus-visible or [data-focus-visible="true"] on the trigger
• Disabled: :disabled or [data-disabled="true"] on the trigger and the root
• Hidden: [aria-hidden="true"] and hidden="until-found" on the content while collapsed

API Reference

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

Disclosure

React	solidtype	Type	Default	Description
id	id	string		Its key in a Disclosure_group
isExpanded	is_expanded	bool		Whether it is expanded, while given
defaultExpanded	default_expanded	bool	false	Whether it is expanded at first
onExpandedChange	on_expanded_change	bool -> unit		Called with its new state
isDisabled	is_disabled	bool	false	Whether it is disabled
className	class_	string		Added after HeroUI’s classes
children	children	elements		Its heading and content
render	—			Not yet

Disclosure.Heading, Disclosure.Trigger, Disclosure.Content, Disclosure.Body

React	solidtype	Type	Description
className	class_	string	Added after HeroUI’s classes
children	children	elements	Its content

Disclosure.Indicator

React	solidtype	Type	Description
className	class_	string	Added after HeroUI’s classes
children	—		Not yet: HeroUI’s chevron is always drawn

Beside React

Original HeroUI documentation: Disclosure.

The same HeroUI Disclosure twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two triggers: a marked row is one they disagree on, and a dimmed row is a framework’s own, which no style reads. Each trigger’s aria-controls names its own content by the id its framework made; Kobalte marks the trigger expanded or closed, and disabled, with empty attributes, which no style of HeroUI’s reads.

disabled

solidtype — OCaml, on Solid and Kobalte

Shipping

React — TypeScript, on React Aria

attribute	solidtype	React