Guidance for using Disclosure in forms

[timparsons]

We are looking to use the Disclosure component in a configuration form to toggle the visibility of advanced configuration options. Ideally, the disclosure containing the advanced configuration form elements would be closed in order to keep the form more succinct. What is the recommended state of a disclosure when used in a form?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

The recommended state of a Disclosure when used in a form, especially for advanced configuration options, would ideally be closed to keep the form succinct and less overwhelming for the user. This approach helps in decreasing noise on the page and making the form appear more streamlined. You can control the expanded state of the Disclosure programmatically to ensure it starts in a closed state when the form is initially presented to the user.

To achieve this, you can use the useDisclosureState hook along with the state prop to programmatically control the open/close state of the Disclosure component. This allows you to integrate the disclosure state with your application state and functionality, making it possible to have the Disclosure start in a closed state.

Here's a simple example on how to use the useDisclosureState hook to control the Disclosure state:

import * as React from 'react';
import {useDisclosureState, Disclosure, DisclosureContent, DisclosureHeading} from '@twilio-paste/disclosure';

const Example = () => {
  const disclosure = useDisclosureState({visible: false});
  return (
    <Disclosure state={disclosure}>
      <DisclosureHeading as="h2" variant="heading20">
        Advanced Configuration
      </DisclosureHeading>
      <DisclosureContent>
        {/* Your advanced configuration form elements go here */}
      </DisclosureContent>
    </Disclosure>
  );
};

This example sets the Disclosure to be closed initially by setting the visible property to false in the useDisclosureState hook. This is a recommended approach for forms where you want to keep advanced options hidden by default to maintain a cleaner and more user-friendly interface.

For more information on using the disclosure state hook, you can refer to the Disclosure component docs.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Ability to toggle visible to true or false on Disclosures - Answer (updated: 06/14/2023, similarity score: 89%)
• Sidebar or Navigation component? - Answer (updated: 06/09/2023, similarity score: 88%)
• Is it possible to externally control a Disclosure's open/close state? - Answer (updated: 06/25/2021, similarity score: 88%)

[dosubot[bot]]

Hello @timparsons! I'm Dosu, your friendly bot here to help you solve bugs, answer questions, and navigate contributions while you wait for a human maintainer. How can I assist you today?

The recommended state for a Disclosure component when used in a form to toggle the visibility of advanced configuration options is to use the useDisclosureState hook to manage its state. This allows you to set the initial state, manage transitions, and keep the component in sync with user interactions or programmatically control the visibility based on application logic. Additionally, you can enhance the user experience by implementing a custom hook, such as useDelayedDisclosureState, which introduces a delay in toggling the visibility ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[roxanagomez]

Hey @timparsons pretty much what TwilioBot said, if this is for advanced settings, I’m assuming most users won’t need to interact with those frequently. So keeping them tucked into a closed Disclosure to start should be totally fine and shouldn’t create any usability concerns.

[timparsons]

Thank you @roxanagomez!