Conditional Inputs

About

This component allows you to conditionally show/hide inputs and an other layer based on the conditional value of inputs in Framer. This component lives inside Framer's native form allowing you to make full use of the built it Framer collection methods. You can make conditions with the following inputs : Text Fields, Selections, Radio Buttons, Checkboxes, Numeric Fields

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library

Instructions

1. Add the LogicGate component to your canvas.

2. In the properties panel, Set the "Condition" with a JavaScript expression (e.g., 'age > 18').

3. Add a component instance to "Content if True".

4. Optionally, add a component instance to "Content if False".

5. Toggle "Debug Mode" if you need to troubleshoot.

6. Preview & Test

How It Works

The component accepts four main controls: 'condition' (a JavaScript expression to evaluate), 'content' (component to show if condition is true), 'fallbackContent' (component to show if condition is false), and 'debug' (boolean to toggle debug information display). Nested conditions are also supported

Each of the component can be an input or any other layer. You can also add multiple LogicGate components inside the Form.

Support

For any queries and help setting up the component, contact hello@segmentui.com