Conditional Form
Description
The Conditional Form pattern is allows users to interact with a form whose content changes dynamically based on user input. This pattern is composed of several sub-components from the UI library:
- Card: A container component that provides a background and border for its children.
- Stack: A layout component that arranges its children in a stack, either horizontally or vertically.
- Toggle: A component that represents a state, allowing users to switch between two options. It is initially in a neutral state, and can be toggled to an on or off state.
- Heading: A component that renders a heading text.
- IconButton: A button component that takes an icon as a child. The Conditional Form component utilizes these components to create a dynamic form interface where certain sections are displayed or hidden based on the state of the toggle.
Usage
To implement the Conditional Form pattern, follow these steps:
- Use a Card component to provide a container for the form content.
- Utilize the Stack component to organize the form elements vertically or horizontally.
- Include the Toggle component to allow users to switch between different states of the form.
- Create sections within the form based on the different states of the Toggle component.
- The card children should be conditionally rendered based on the state of the Toggle component.
Card header
In the following example, the conditionally rendered content is based on the state of the Toggle component that is also a child of the Card component. When the Toggle component is in the neutral state, the form content is hidden. When the Toggle component is in the on state, the form content is displayed. The form content is a simple paragraph element that displays a message indicating that the form content is checked.