Disclosure

A controlled expand and collapse with a rotating chevron and an animated height.

import { useState } from 'react';
import { Checkbox, Disclosure } from '@andrewbehma/glass-ui';

Playground

Disclosure.tsx

import { useState } from 'react';
import { Checkbox, Disclosure } from '@andrewbehma/glass-ui';

function Example() {
  const [open, setOpen] = useState(true);
  return (
    <div className="w-full max-w-80">
      <Disclosure trigger="Advanced settings" open={open} onOpenChange={setOpen}>
        <div className="grid gap-3 pt-3">
          <Checkbox label="Run checks on every push" defaultChecked />
          <Checkbox label="Cancel superseded builds" />
        </div>
      </Disclosure>
    </div>
  );
}